Simple analysis of react-router routing

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

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

react-concise-router is a routing plug-in based on react-router v4.x package.

1. Installation

Direct installation

npm install -S react-concise-router

You also need to install

npm install -S react-router

npm install -S react-router-dom

2. Define routing list objects

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>
    )
  }
}

API

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.path does not exist or is *. The route will be treated as a notMath route and matched. 404

router

• router.route(route) Generate url for history.push.

• router.beforeEach(cxt, next) Routing switching middleware

router.view

is a routing export component.

props

• props.name string route export subname, default 'default'; in options .routes[].name settings.

router.link

router.link is a component similar to Link.

props

• props.to object|string path or path object route.

router.beforeEach

router.beforeEach is a routing middleware, you can do some routing switching events; such as authorization interception, redirection , waiting for operations.

You should define it as a function

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

• 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

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Analysis of React components and state|props

How to use JS to implement a simple digital clock

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!