This article mainly introduces a simple analysis of react-router routing, which has a certain reference value. Now I share it with everyone. Friends in need can refer to it
What we want is a simple react-router routing
I am used to the usage of vue-router routing, but it always feels quite troublesome to use react-router again.
So is there any way to use react with a simple routing plug-in like vue-router?
Whether it is there or not, I have already built the wheel, please accept it.
react-concise-router
is a routing plug-in based on react-router v4.x package.
Direct installation
npm install -S react-concise-router
You also need to install
npm install -S react-router
npm install -S react-router-dom
router.js
import Router from 'react-concise-router' import Home from './views/Home' import User from './views/User' import UserInfo from './views/UserInfo' import ErrorPage from './views/Error' import view from './views/admin/view' import Dashboard from './views/admin/Dashboard' const router = new Router ({ mode: 'hash', routes: [ {path: '/', component: Home}, {path: '/user', component: User}, {path: '/user/:userId', name: 'info', component: UserInfo}, { path: '/admin', component: view, name: 'admin-view', children: [ {path: '/', component: Dashboard}, {path: '/test', component: Dashboard}, {component: ErrorPage} ] }, {path: '*', component: ErrorPage}, ] }) export default router
App.jsx
import React from 'react' import router from './router' export default class App extends React.Component { render () { return ( <p> <p>wellcome !</p> <router.view /> </p> ) } }
new Router(options) Create a routing object and return router.
options object object of routing configuration
options.mode string defines the routing type, hash|history
options.routes array route list
options.routes[].name string route name, if the children attribute currently exists, it indicates the route exit name
options.routes[].path string path
options.routes[].component Function routing component; if the children attribute currently exists, it represents the child routing component
##options.routes [].children array sub-route list
options.pathrouterdoes not exist or is
*. The route will be treated as a notMath route and matched. 404
router.route(route) Generate url for history.push.
router.beforeEach(cxt, next) Routing switching middleware
is a routing export component.
props
props.name string route export subname, default 'default'; in options .routes[].name settings.
router.link is a component similar to
Link.
props
props.to object|string path or path object route.
router.beforeEach is a routing middleware, you can do some routing switching events; such as authorization interception, redirection , waiting for operations.
router.beforeEach = function (ctx, next) {}
ctx This is a context object, {route, router, history,... }
next This is a callback function, please call it at the end; next can accept a string path or object, so Redirect to other routes.
route.name string named route name, takes precedence over path
route.path string path
route.params object route parameter object
route.query object query string object
route.hash string link hash
Analysis of React components and state|props
The above is the detailed content of Simple analysis of react-router routing. For more information, please follow other related articles on the PHP Chinese website!