Home > Web Front-end > JS Tutorial > body text

Simple analysis of react-router routing

不言
Release: 2018-07-13 16:26:43
Original
2004 people have browsed it

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
Copy after login

You also need to install

npm install -S react-router
Copy after login
npm install -S react-router-dom
Copy after login

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
Copy after login

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>
    )
  }
}
Copy after login

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) {}
Copy after login
  • 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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template