From b1597da0c3c1a69c2ac793e701b15ef54d1cd406 Mon Sep 17 00:00:00 2001 From: gvergnaud Date: Mon, 5 Jun 2017 12:10:29 +0200 Subject: [PATCH] Adds Router#replaceRoute and Router#prefetchRoute --- README.md | 39 ++++++++++++++- dist/index.js | 86 ++++++++++++++++++++++------------ example/express/pages/index.js | 10 ++-- example/express/routes.js | 2 +- package.json | 2 +- src/Router.js | 32 +++++++++---- 6 files changed, 122 insertions(+), 49 deletions(-) diff --git a/README.md b/README.md index 2cb063e..efcf524 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ Create a `routes.js` file and list all your **Dynamic** routes. You don't have to list your regular routes, as Next.js will handle them as usual. ```js -const Router = require('nextjs-dynamic-routes').default +const Router = require('nextjs-dynamic-routes') const router = new Router() @@ -91,6 +91,21 @@ export default () => ( ) ``` +```jsx +// pages/character.js +import React from 'react' + +export default class Character extends React.Component { + static async getInitialProps({ query }) { + return fetch(`//swapi.co/api/films/${query.id}`).then(x => x.json()) + } + + render() { + return

{this.props.name}

+ } +} +``` + ## Prefetching data Next.js has this great feature allowing you to prefetch data for your next routes in the background. @@ -103,9 +118,29 @@ You can benefit of that by simply putting a `prefetch` property on any Link : ## Imperative API -### Router.pushRoute(name, params) +### Router.pushRoute(name, params [, options]) ```jsx +import Router from '../routes' + ``` + +### Router.replaceRoute(name, params [, options]) +```jsx +import Router from '../routes' + + +``` + +### Router.prefetchRoute(name, params) +```jsx +import Router from '../routes' + + +``` diff --git a/dist/index.js b/dist/index.js index c7f1f83..e23e583 100644 --- a/dist/index.js +++ b/dist/index.js @@ -72,11 +72,12 @@ module.exports = /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; +Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__queryString__ = __webpack_require__(6); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__object__ = __webpack_require__(5); -/* unused harmony export replaceWithParams */ -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return addInitialSlash; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return createLinkProps; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "replaceWithParams", function() { return replaceWithParams; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "addInitialSlash", function() { return addInitialSlash; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "createLinkProps", function() { return createLinkProps; }); @@ -184,32 +185,24 @@ var fromString = function fromString(str) { /***/ }), /* 7 */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { +/***/ (function(module, exports, __webpack_require__) { -"use strict"; -Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_path_match__ = __webpack_require__(3); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_path_match___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_path_match__); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react__ = __webpack_require__(4); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_react__); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_next_link__ = __webpack_require__(1); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_next_link___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_next_link__); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_next_router__ = __webpack_require__(2); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_next_router___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_next_router__); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_routing__ = __webpack_require__(0); var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } +var pathMatch = __webpack_require__(3); +var React = __webpack_require__(4); +var Link = __webpack_require__(1).default; +var NextRouter = __webpack_require__(2).default; +var _require = __webpack_require__(0), + addInitialSlash = _require.addInitialSlash, + createLinkProps = _require.createLinkProps; - - - - -var match = __WEBPACK_IMPORTED_MODULE_0_path_match___default()(); +var match = pathMatch(); var Router = function Router() { var _this = this; @@ -222,7 +215,7 @@ var Router = function Router() { var pattern = _ref.pattern, name = _ref.name, _ref$page = _ref.page, - page = _ref$page === undefined ? __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__utils_routing__["a" /* addInitialSlash */])(name) : _ref$page; + page = _ref$page === undefined ? addInitialSlash(name) : _ref$page; _this.routes.push({ pattern: pattern, page: page, name: name }); }; @@ -237,30 +230,61 @@ var Router = function Router() { this.Link = function (_ref2) { var children = _ref2.children, - route = _ref2.route, + name = _ref2.route, params = _objectWithoutProperties(_ref2, ['children', 'route']); var _getRoute = _this.getRoute(name), page = _getRoute.page, pattern = _getRoute.pattern; - return __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement( - __WEBPACK_IMPORTED_MODULE_2_next_link___default.a, - _extends({}, __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__utils_routing__["b" /* createLinkProps */])(page, pattern, params), params), + return React.createElement( + Link, + _extends({}, createLinkProps(page, pattern, params), params), children ); }; - this.pushRoute = function (name, params) { + this.pushRoute = function (name) { + var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + var options = arguments[2]; + var _getRoute2 = _this.getRoute(name), page = _getRoute2.page, pattern = _getRoute2.pattern; - var _createLinkProps = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__utils_routing__["b" /* createLinkProps */])(page, pattern, params), + var _createLinkProps = createLinkProps(page, pattern, params), href = _createLinkProps.href, as = _createLinkProps.as; - return __WEBPACK_IMPORTED_MODULE_3_next_router___default.a.push(href, as); + return NextRouter.push(href, as, options); + }; + + this.replaceRoute = function (name) { + var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + var options = arguments[2]; + + var _getRoute3 = _this.getRoute(name), + page = _getRoute3.page, + pattern = _getRoute3.pattern; + + var _createLinkProps2 = createLinkProps(page, pattern, params), + href = _createLinkProps2.href, + as = _createLinkProps2.as; + + return Router.replace(href, as, options); + }; + + this.prefetchRoute = function (name) { + var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + + var _getRoute4 = _this.getRoute(name), + page = _getRoute4.page, + pattern = _getRoute4.pattern; + + var _createLinkProps3 = createLinkProps(page, pattern, params), + href = _createLinkProps3.href; + + return Router.prefetch(href); }; this.getMatchingRoute = function (url) { @@ -287,14 +311,14 @@ var Router = function Router() { }; this.getRoutePath = function (routeName, params) { - var _getRoute3 = _this.getRoute(name), - pattern = _getRoute3.pattern; + var _getRoute5 = _this.getRoute(name), + pattern = _getRoute5.pattern; return replaceWithParams(pattern, params); }; }; -/* harmony default export */ __webpack_exports__["default"] = Router; +module.exports = Router; /***/ }) /******/ ]); \ No newline at end of file diff --git a/example/express/pages/index.js b/example/express/pages/index.js index edc03dd..d03c8ee 100644 --- a/example/express/pages/index.js +++ b/example/express/pages/index.js @@ -5,20 +5,20 @@ export default () => (

Character

Films

Character and Film