Shulou(Shulou.com)06/03 Report--

This article introduces you what is react routing knowledge, the content is very detailed, interested friends can refer to, hope to be helpful to you.

What is routing?

To put it simply, the web server handles different business and logic according to different addresses.

The following code all runs in react scaffolding

Basic use of pure components

/ / component update mechanism: / / as long as the parent component is re-rendered, all component subtrees will also be updated / / performance optimization / / 1. Lighten state// 2. Avoid unnecessary re-rendering (performance optimization) / / shouldComponentUpdate (nextProps, nextState) {.... } / / Hook function returns a Boolean value, true to update false do not update / / manual implementation is OK, but too troublesome / / 3. The actual official website provides a pure component, and the internal shouldComponentUpdate logic has been implemented for you / / will help you compare props and state, and decide whether to update / / ordinary components: class App extends React.Component// pure components: class App extends React.PureComponent will be more than ordinary components, the process of comparing data / / for example: a component has to be rendered, resulting in a great loss of performance At this point, you can consider pure components to avoid some meaningless updates / / not all scenarios should use pure components. Normally, you should use ordinary components import React from 'react'import ReactDOM from' react-dom'class App extends React.PureComponent {state = {nameList: ['Shuai Peng','Lv Bu', 'Zhang Fei'], currentName:'' } render () {console.log ('App-render') return (I am App component result: {this.state.currentName} roll call)} handleClick () {const randomIndex = parseInt (Math.random () * this.state.nameList.length) const currentName = this.state.nameList [randomIndex] this.setState ({currentName) }) console.log (currentName)} / / requirements: if the value of state does not change, it does not need to be updated to avoid some unnecessary updates / / shouldComponentUpdate (nextProps, nextState) {/ / if (this.state.currentName = nextState.currentName) {/ / return false / /} else {/ / return true /} /} ReactDOM.render ( Document.getElementById ('root')) precautions for the use of pure components

/ / 4. Notes on the use of pure components (if the pure components have subcomponents, the subcomponents should also be pure components (all families are pure) / / (1) the internal comparison of pure components is shallow, and there is no problem with value types. Complex types only compare addresses / / (2) use pure components, when updating data, there is no problem with simple types, and complex types are updated. Import React from 'react'import ReactDOM from' react-dom'class App extends React.PureComponent {state = {nameList: ['Shuai Peng','Lv Bu', 'Zhang Fei'], currentName:'', obj: {name: 'zs', age: 18,} } render () {console.log ('App-render') return (I am the App component

Name: {this.state.obj.name}

{this.state.nameList}

Change value)} handleClick () {/ / to update the object, prepare a new object / / const obj = {... this.state.obj} / / obj.name = 'ls' / / this.setState ({/ / obj: obj, / /}) / / to update the array To prepare a new array / / this.setState ({/ / nameList: [. This.state.nameList, 'Wang Wu'], / /}) const arr = [. This.state.nameList] arr.push ('Wang Wu') this.setState ({nameList: arr,})}} basic initial experience of ReactDOM.render (, document.getElementById ('root')) routing

Import React from 'react'import ReactDOM from' react-dom'import {HashRouter, Link, Route} from 'react-router-dom'// routing: / / 1. Download yarn add react-router-dom// 2. React-router-dom is a package that contains many components / / 3. HashRouter component is the entire routing object, one project is one, need to wrap the contents of the entire project / / 4. Link component, render as a link, can be used to route jump, configure the path / 5. Route component through to Configure routing rules (which path matches which component), which is also the route exit! / / each Route is independent of each other, as long as the path matches You can show the configured component / / define three functional components const Home = () = > I am the Home component const Login = () = > I am the Login component const User = () = > I am the User component class App extends React.PureComponent {render () {return (I am the App component home login) User {/ * only path path Match the path of the address bar, and the configured components * /})}} ReactDOM.render (, document.getElementById ('root')) HashRouter and BrowserRouter will be displayed.

Import React from 'react'import ReactDOM from' react-dom'import {HashRouter as Router, Link, Route} from 'react-router-dom'// Router component, there are two HashRouter, BrowserRouter// 1. HashRouter underlying implementation based on: address bar hash value, based on anchor jump implementation / / 2. BrowserRouter underlying implementation is based on: H6 history API, the address bar does not have # / (if you want to use development, there is no problem, but online Needs to be configured in the background) / / defines three function components const Home = () = > I am the Home component const Login = () = > I am the Login component const User = () = > I am the User component class App extends React.PureComponent {render () {return (I am the home login of the App component User {/ * only path path If it matches the path of the address bar, the configured component * /})}} ReactDOM.render (, document.getElementById ('root')) Link component and NavLink component will be displayed.

Import React from 'react'import ReactDOM from' react-dom'import {HashRouter as Router, NavLink, Route} from 'react-router-dom'import'. / index.css'// Link component and NavLink component / / 1. Link component, rendered as a link for route jump, configure path / / default Link via to, without highlighted class name identification / / 2. NavLink component, render as a link for route jump Configure the path / / (1) NavLink through to, when the path matches, the highlighted class name active// (2) can be configured through activeClassName, and the highlighted class name / / (3) can be configured through activeStyle to change the label directly. The highlighted style / / (4) is a fuzzy match to= "/ home" can match / home/ home/aa// exact match You need to configure the exact attribute, to= "/ home", which can only match / home Will only highlight / / define three function components const Home = () = > I am the Home component const Login = () = > I am the Login component const User = () = > I am the User component class App extends React.PureComponent {render () {return (I am the home page of the App component Login user {/ * only path path If the path matches the address bar, the configured component * /})}} ReactDOM.render (, document.getElementById ('root')) / * * index.css*/.active {color: red will be displayed. Font-size: 30px;} .selected {color: blue; font-size: 30px;} Route and Switch components

Import React from 'react'import ReactDOM from' react-dom'import {HashRouter as Router, NavLink, Route, Switch} from 'react-router-dom'import'. / index.css'// Route component / / function: you can configure routing rules, which is also the exit of the route. As long as the paths match, then the configured components will be shown here / 1. Each Route is independent of each other (including configuring multiple same paths and displaying different components, it is also possible) / / 2. The path of Route configuration, which is also a fuzzy match, can be accurately matched through exact / 3. If the path is not configured, then the configured components will be displayed by default / / will cooperate with the Switch component, and the configuration / / Switch component of the 404 page can be completed: multiple Route components can be wrapped so that the first matching Route component can be displayed. No matter / / defines the function component const Home = () = > I am the Home component const Login = () = > I am the Login component const User = () = > I am the User component const Error = () = > I am the 404 page The page you want to visit does not exist!! class App extends React.PureComponent {render () {return (I am the App component homepage login) User {/ * only path path If it matches the path of the address bar, the configured component * /})}} ReactDOM.render (, document.getElementById ('root')) will be displayed.

Nested routing

Import React from 'react'import ReactDOM from' react-dom'import {HashRouter as Router, NavLink, Route, Switch, Redirect,} from 'react-router-dom'import'. / index.css'// Redirect component: you can redirect from from which to to which / / react, and configure nested routes. It's very simple. You only need to write Route components directly where you need to write nested subroutes. The nested child routes you configured The path must contain the path of the parent route / / the function component const Home = () = > (I am a Home component) const Login = () = > (I am a Login component) / / -/ / requirements: inside the user's User component And personal information. My favorite const User = () = > (I am the User component) const UserDefault = () = > I am the default User content const Info = () = > I am the Info component const Star = () = > I am the Star component / / -const Error = () = > I am page 404 The page you want to visit does not exist!! class App extends React.PureComponent {render () {return (I am the App component homepage login) User {/ * only path path If the path matches the address bar, the configured component * /})}} ReactDOM.render (, document.getElementById ('root')) routing parameters will be displayed.

Import React from 'react'import ReactDOM from' react-dom'import {HashRouter as Router, Route, Link} from 'react-router-dom'import'. / index.css'// if you want to get the parameter information of dynamic routing, you need to obtain it through props. / / Route will send route-related information and related methods Will be passed to you via props / / const Product = (props) = > I am the product component class Product extends React.Component {render () {/ / this.props parameter / / (1) history stores the method of hopping routing / / (2) location stores the current routing address / / (3) match stores the dynamic routing parameter console.log ( This.props) console.log (this.props.match.params.id) return (I am a product component-{this.props.match.params.id} go back to the home page)} handleClick () {/ / console.log (this.props.history) / / this.props.history.go (- 1) this.props.history.push ('/ home')}} const Home I am class App extends React.Component {render () {return (I am App component Home Commodity 1 Commodity 2 Commodity 3 Commodity 4)}} ReactDOM.render ( Document.getElementById ('root')) so much for sharing knowledge about what react routing is. I hope the above content can be of some help to you and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.