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.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!

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

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

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

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

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

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

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


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

SublimeText3 Mac version
God-level code editing software (SublimeText3)

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
Easy-to-use and free code editor

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.
