search
HomeWeb Front-endJS TutorialSimple analysis of react-router routing
Simple analysis of react-router routingJul 13, 2018 pm 04:26 PM
react-routerreact.js

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><p>wellcome !</p>
        <router.view></router.view>
      
    )
  }
}

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

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!

Statement
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
React父组件怎么调用子组件的方法React父组件怎么调用子组件的方法Dec 27, 2022 pm 07:01 PM

调用方法:1、类组件中的调用可以利用React.createRef()、ref的函数式声明或props自定义onRef属性来实现;2、函数组件、Hook组件中的调用可以利用useImperativeHandle或forwardRef抛出子组件ref来实现。

怎么调试React源码?多种工具下的调试方法介绍怎么调试React源码?多种工具下的调试方法介绍Mar 31, 2023 pm 06:54 PM

怎么调试React源码?下面本篇文章带大家聊聊多种工具下的调试React源码的方法,介绍一下在贡献者、create-react-app、vite项目中如何debugger React的真实源码,希望对大家有所帮助!

深入理解React的自定义Hook深入理解React的自定义HookApr 20, 2023 pm 06:22 PM

React 自定义 Hook 是一种将组件逻辑封装在可重用函数中的方式,它们提供了一种在不编写类的情况下复用状态逻辑的方式。本文将详细介绍如何自定义封装 hook。

React为什么不将Vite作为构建应用的首选React为什么不将Vite作为构建应用的首选Feb 03, 2023 pm 06:41 PM

React为什么不将Vite作为构建应用的首选?下面本篇文章就来带大家聊聊React不将Vite作为默认推荐的原因,希望对大家有所帮助!

7 个很棒且实用的React 组件库(压箱底分享)7 个很棒且实用的React 组件库(压箱底分享)Nov 04, 2022 pm 08:00 PM

本篇文章给大家整理分享7 个很棒且实用的React 组件库,日常开发中经常会用到的,快来收藏试试吧!

react怎么设置div高度react怎么设置div高度Jan 06, 2023 am 10:19 AM

react设置div高度的方法:1、通过css方式实现div高度;2、在state中声明一个对象C,并在该对象中存放更换按钮的样式,然后获取A并重新设置C中的“marginTop”即可。

【翻译】使用自定义hooks对React组件进行重构【翻译】使用自定义hooks对React组件进行重构Jan 17, 2023 pm 08:13 PM

我时常会听到人们谈起React函数组件,提到函数组件会不可避免的变得体积更大,逻辑更复杂。毕竟,我们把组件写在了“一个函数”里,因此你不得不接受组件会膨胀导致这个函数会不断膨胀。

聊聊Vuex与Pinia在设计与实现上的区别聊聊Vuex与Pinia在设计与实现上的区别Dec 07, 2022 pm 06:24 PM

在进行前端项目开发时,状态管理始终是一个绕不开的话题,Vue 与 React 框架本身提供了一部分能力去解决这个问题。但是在开发大型应用时往往有其他考虑,比如需要更规范更完善的操作日志、集成在开发者工具中的时间旅行能力、服务端渲染等。本文以 Vue 框架为例,介绍 Vuex 与 Pinia 这两种状态管理工具在设计与实现上的区别。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.