We want a simple React-Router route

React-router is a router that can be used with a vue router.

Does react use a simple routing plugin like vue-router?

Regardless, I’ve built the wheels. Take the React-Destroy-Router.

react-concise-router

React-router is a routing plug-in based on the React-Router V4.x wrapper.

With this plugin, you don’t have to learn the react-router V4.x documentation, and you can use this plugin to implement the routing you need.

1, install,

Installed directly

npm install -S react-concise-router
Copy the code

You also need to install

npm install -S react-router
Copy the code

npm install -S react-router-dom
Copy the code

2. Define the route list object

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: The '*'.component: ErrorPage},
  ]
})

export default router
Copy the code

App.jsx

import React from 'react'
import router from './router'

export default class App extends React.Component {
  render () {
    return (
      <div>
        <p>wellcome !</p>
        <router.view />
      </div>)}}Copy the code

API

New Router(options) Creates a routing object and returns the Router.

• Options Object Indicates the object of route configuration
• Options. The mode string define the type of routing, hash | history
• Options. routes array Routes list
• Options.routes []. Name String Route name. If the children attribute exists, it indicates the route egress name
• Options. Routes []. Path string path
• Options.routes []. Component Function If the children property currently exists, it represents the child routing component
• Options.routes []. Children array List of child routes

Options. path does not exist or routes with * are treated as notMath routes that match 404

router

• Router.route (route) generates the URL for history.push.

• Route. beforeEach(CXT, Next) Routing switch middleware

router.view

is a router exit component.

props

• props.nameString Sub name of the route exit. Default is ‘default’. inoptions.routes[].nameSettings.

router.link

Router. link is a component similar to Link.

props

• Props. To object | the route path of a string or object.

router.beforeEach

Router. beforeEach is a routing middleware that you can do some routing switching events; Such as authorization interception, redirection, wait and so on.

You should define it as a function

router.beforeEach = function (ctx, next) {}
Copy the code

• CTX this is a context object, {route, router, history… }
• nextThis is a callback function, call it at the end;nextYou can take a string path or object that can be redirected to another route.

route

• Route. name String Named route name, which takes precedence over PATH
• The route. The path string path
• Route. params Object Indicates the route parameter object
• Route. query Object Query string object
• Route. hash String Hash of the link

The last

Amway a detailed example: ant-admin-platform

Source: the react – concise – the router

Once again: plug-in development is not long, there may be some problems, if there are problems, please mention issues, thank you for using. React development is new, if there is anything unreasonable, please comment below.