Merge branch '2.x'

.eslintrc.js

@@ -20,11 +20,11 @@ module.exports = {
   ],
   plugins: [],
   settings: {
-    "import/resolver": {
-      webpack: {
-        config: './build/webpack-dev.config.js'
-      },
-    },
+    // "import/resolver": {
+    //   webpack: {
+    //     config: './build/webpack-dev.config.js'
+    //   },
+    // },
     react: {
       version: require('./package.json').dependencies.react,
     },

.gitignore

@@ -8,4 +8,8 @@ analyzer/
 .DS_Store
 */.DS_Store
 plugin/
+esm
+es
+drawer/esm
+drawer/es
 

README.md

@@ -1,9 +1,13 @@
-# `react-view-router`
+# react-view-router@2.x
 
 [![NPM version](https://img.shields.io/npm/v/react-view-router.svg?style=flat)](https://npmjs.com/package/react-view-router)
 [![NPM downloads](https://img.shields.io/npm/dm/react-view-router.svg?style=flat)](https://npmjs.com/package/react-view-router)
 
-> Route configuration component for `react-router-dom`. `react-view-router` is just a `react-router-dom@5` wrapper that can write routing configuration like [vue-router](https://router.vuejs.org/guide/#javascript) in react. see: [Nested Routes](https://router.vuejs.org/guide/essentials/nested-routes.html)
+> A Route manager for `react` can write routing configuration like [vue-router](https://router.vuejs.org/guide/#javascript) in react. see: [Nested Routes](https://router.vuejs.org/guide/essentials/nested-routes.html)
+
+> Unlike 1.x, `react-view-router@2.x` does not depend on the [react-router](https://github.com/ReactTraining/react-router) Library
+
+> see [react-view-router@1.x](https://github.com/gxlmyacc/react-view-router/tree/1.x)
 
 ## Installation
 
@@ -135,9 +139,6 @@ export default useRouteGuards(HomeMainSomeIndex, {
   },
   beforeRouteUpdate(to, from) {
 
-  },
-  afterRouteEnter(to, from) {
-
   },
   afterRouteLeave(to, from) {
 
@@ -221,7 +222,6 @@ const routes = normalizeRoutes([
             beforeEnter(to, from, next) { next(); }
             beforeLeave(to, from, next) { next(); }
             beforeUpdate(to, from) {}
-            afterEnter(to, from) {}
             afterLeave(to, from) {}
           }
         ]
@@ -256,13 +256,6 @@ const routes = normalizeRoutes([
 - `queryProps` boolean or object `{ aa: Number, bb: String, cc: Boolean }`, Pass url query as props into route component.
 - `guards` the route guards, see:[Per-Route Guard](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-after-hooks)
 
-### Route Component Props
-
-Includes all props from `react-router-dom` and the following props.
-
-- `route` current route infos.
-- `parent` the RouterView instance.
-
 ### RouterView Props
 
 - `name` Use for `Named Views`, see [vue-router instructions](https://router.vuejs.org/guide/essentials/named-views.html#nested-named-views)
@@ -275,9 +268,6 @@ Includes all props from `react-router-dom` and the following props.
 - `RouterView.indexOf(route: String|Object): Number` check `route` is in RouterView, like `Array.indexOf`
 - `RouterView.remove(route: String|Object): Object` remove `route` from RouterView, return `removed route` or `undefined`
 
-### RouterLink Component
-- `RouterLink` is `NavLink` component that in `react-router-dom`, just re-exported.
-
 ### ReactViewRouter Props
 - `currentRoute` current matched route infos:
 ```javascript
@@ -310,7 +300,9 @@ Includes all props from `react-router-dom` and the following props.
         /* others: React.Component */
       }
       // the RouterView instance that matched this route config if found.
-      viewInstance: RouterView
+      viewInstances: {
+        default: RouterView
+      }
     }
     ..., 
     routeN
@@ -329,6 +321,9 @@ Includes all props from `react-router-dom` and the following props.
 ```
 see: [Route Object Properties](https://router.vuejs.org/api/#route-object-properties)
 
+### ReactViewRouter instance Props
+- `RouterLink` a `NavLink` component like `route-link` in `vue-router`.
+
 ### ReactViewRouter instance Methods
 - `beforeEach` [global Before Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)
 - `afterEach` [global After Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-after-hooks)
@@ -390,7 +385,6 @@ function normalizeLocation(to, route?) {}
 function isLocation(v) {}
 ```
 
-- `withRouter` just re-export, see: [withRouter](https://reacttraining.com/react-router/web/api/withRouter)
 - `matchPath` just re-export, see: [matchPath](https://reacttraining.com/react-router/web/api/matchPath)
 
 ## NOTE
@@ -409,7 +403,7 @@ function isLocation(v) {}
 ``` 
 otherwise, webpack will package both `history` and `history-fix` into the target js file.
 
-2. if route component is `Class Component` (not `Function Component`), then `this` variable in `afterRouteEnter`, `beforeRouteUpdate`,`beforeRouteLeave`,`afterRouteLeave` Component Guards will be that component instance;
+2. if route component is `Class Component` (not `Function Component`), then `this` variable in `beforeRouteUpdate`,`beforeRouteLeave`,`afterRouteLeave` Component Guards will be that component instance;
 
 ## License
 

build/webpack-base.config.js

@@ -68,12 +68,12 @@ module.exports = function (options) {
       ]
     },
     externals: [
+      'history-fix',
       'react',
-      'mini-create-react-context',
-      'prop-types',
       'react-is',
-      'regenerator-runtime',
-      'hoist-non-react-statics'
+      'path-to-regexp',
+      'prop-types',
+      'regenerator-runtime'
     ],
     resolve: {
       symlinks: false,

demo/src/views/component/home/index.js

@@ -23,9 +23,6 @@ export default useRouteGuards(HomeIndex, {
   beforeRouteUpdate(to, from) {
     console.log('HomeIndex beforeRouteUpdate', to, from);
   },
-  afterRouteEnter(to, from) {
-    console.log('HomeIndex afterRouteEnter', to, from);
-  },
   afterRouteLeave(to, from) {
     console.log('HomeIndex afterRouteLeave', to, from);
   },

demo/src/views/component/home/main/index.js

@@ -1,10 +1,16 @@
 import React from 'react';
 import { RouterView, useRouteGuards } from 'react-view-router';
+import { RouterLink } from 'router';
 
 function HomeMainIndex() {
   return (
     <div>
       <h1>HomeMainIndex</h1>
+      <div className="nav">
+        <RouterLink to="some" append>some</RouterLink>
+        &nbsp;
+        <RouterLink to="other" append>other</RouterLink>
+      </div>
       <RouterView />
       <RouterView name="footer" />
     </div>
@@ -24,9 +30,6 @@ export default useRouteGuards(HomeMainIndex, {
   beforeRouteUpdate(to, from) {
     console.log('HomeMainIndex beforeRouteUpdate', to, from);
   },
-  afterRouteEnter(to, from) {
-    console.log('HomeMainIndex afterRouteEnter', to, from);
-  },
   afterRouteLeave(to, from) {
     console.log('HomeMainIndex afterRouteLeave', to, from);
   },

demo/src/views/component/home/main/some/index.js

@@ -51,9 +51,6 @@ export default useRouteGuards(
     beforeRouteUpdate(to, from) {
       console.log('HomeMainSomeIndex beforeRouteUpdate', this, to, from);
     },
-    afterRouteEnter(to, from) {
-      console.log('HomeMainSomeIndex afterRouteEnter', this, to, from);
-    },
     afterRouteLeave(to, from) {
       console.log('HomeMainSomeIndex afterRouteLeave', this, to, from);
     },

demo/src/views/router/index.js

@@ -1,5 +1,7 @@
-import ReactViewRouter from 'react-view-router';
+import ReactViewRouter, { createRouterLink } from 'react-view-router';
 
 const router = new ReactViewRouter();
 
+export const RouterLink = createRouterLink(router);
+
 export default router;

drawer/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "react-view-router-drawer",
+  "main": "src/index.js",
+  "module": "esm/index.js"
+}