Install dependencies
Install the routing module: NPM I react-router-dom-s
The basic routing
First we’ll create a new React project (create-react-app Demo) to demonstrate this
Delete unnecessary code and create several JS pages for testing, as follows:
Then we need to introduce the dependencies we installed in the index.js file (alias as if you feel the name is long) and be sure to wrap the root component (
Index. Js code:
Import React from "React" import ReactDOM from 'React -dom' import App from './App' Import {BrowserRouter as Router} from 'react-router-dom' reactdom.render (// wrap the root component with BrowserRouter, <Router> <App /> </Router>, document.getelementById (' App '))Copy the codeThen introduce the required dependencies and components to be used in app.js, configure routing rules, and set click jump
App. Js code:
import React, { Component } from 'react'; // Import dependencies and components import {Route, Link } from "react-router-dom" import Home from "./Home" import List from "./List" import User from "./User" class App Extends Component {render () {return (< >, < ul > < li > < Link to = "/" > home page < / Link > < / li > < li > < Link to = "/ list" > list page < / Link > < / li > <li> <Link to="/user"> user center </Link> </li> </ul> {/* Configure route rules exact. */} <Route path='/' component={Home}></Route> <Route path='/list' component={list}></Route> <Route path='/user' component={User}></Route> </> ) } } export default App;Copy the codeEffect demonstration:
Embedded routines by
Create a new user folder under SRC to hold the registration and login pages as follows:
If we want to nest under the page, we configure the route under that page
We want to nest pages in user-centric pages, import the routing dependencies and components in the user.js file and configure the routing
Modify the user.js file code:
import React,{Component} from 'react'; // Import dependencies and components import {Route, Link } from "react-router-dom" import Reg from "./user/Reg" import Login from "./user/Login" class User extends Component {render () {return (< > < h1 > user center < / h1 > < ul > < li > < Link to = "/ user/reg" > register < / Link > < / li > < li > < Link To = "/ user/login" > login < / Link > < / li > < / ul > {/ * to configure routing * /} < the Route path = "/ user/reg" component = {reg} > < / Route > < the Route path="/user/login" component={Login}></Route> </> ) } } export default User;Copy the codeEffect demonstration:
Dynamic routing
Create a new detail.js file under SRC to display the list details:
Import React from "React" // get id, make axios request, Class for more details of data Detail extends React.Com ponent {componentDidMount () {the console. The log (). This props. Match. Params. Id} render () { Return (< div > < h2 > product details page < / h2 > < h4 > {axios request access "by" + this props. Match the params. Id + number "commodity data"} < / h4 > < / div >)}} export default DetailCopy the codeNext modify the code in list.js:
import React,{Component} from 'react'; Link import {Link} from 'react-router-dom' class List extends Component{render(){return(<> <h1> List page </h1> <ul> < li > < Link to = '/ detail / 1 > no. 1 goods < / Link > < / li > < li > < Link to ='/detail / 2 > no. 2 goods < / Link > < / li > < li > < Link To = '/ detail / 3 > third commodity < / Link > < / li > < / ul > < / a >)}} export default List;Copy the codeFinally we need to import the detail.js file in app.js and configure the route:
Import Detail from './Detail' // Remember to add /:id <Route path='/ Detail /:id' component={Detail}></Route>Copy the codeOperation effect:
Programmatic routing
Change list. js file, introduce the history dependency, generate the history, and configure the history, define the button, implement the jump:
import React,{Component} from 'react'; // Use Link import {Link} from 'react-router-dom' // import {createBrowserHistory} from 'history' // generate history let history = createBrowserHistory({// configure mandatory refresh, if not refresh, no reaction, Class List extends Component{render(){return(<> <h1> List page </h1> <ul> <li><Link To = '/ detail / 1 > no. 1 goods < / Link > < / li > < li > < Link to ='/detail / 2 > no. 2 goods < / Link > < / li > < li > < Link to = '/ detail / 3 > third commodity < / Link > < / li > <p>...... < / p > {/ * can use push method in history to * / jump} < button onClick = {() = > history. Push ('/detail / 100 ')} > no. One hundred goods < / button > < / ul > < / a >)}} export default List;Copy the codeWe then import and generate history in the detail.js file as well. Here we define a back button that returns the previous level:
Import React from "React" import {createBrowserHistory} from 'history'; // Generate history let history = createBrowserHistory(); class Detail extends React.Component { componentDidMount(){ console.log(this.props.match.params.id) } render() { return (< div > < h2 > product details page < / h2 > < h4 > {axios request access "by" + this props. Match the params. Id + number "commodity data"} < / h4 > {/ * both methods can achieve returns at the next higher level * /} {/ * < button OnClick = {() = > history. GoBack ()} > back < / button > * /} < button onClick = {() = > history. The go (1)} > back < / button > < / div >)}} export default DetailCopy the codeOperation effect:
Redirection with Switch
Generally, redirection needs to be used with Switch
We need to create a new 404 page under SRC and jump to the 404 page if there is no match
import React,{Component} from 'react'; Class Error extends Component{render(){return(<><h1> </h1>)}} export default Error;Copy the codeNext we need to modify the code in the app.js file to introduce the required dependencies and pages, and modify the code that configures the routing rules:
import React, { Component } from 'react'; {Route, Link, Redirect, Switch } from "react-router-dom" import Home from "./Home" import List from "./List" import User from "./User" import Detail from './Detail' import Error from './404' class App extends Component { render() { return ( <> <ul> <li> <Link To = "/" > home page < / Link > < / li > < li > < Link to = "/ list" > list page < / Link > < / li > < li > < Link to = "/ user" > user center < / Link > < / li > < / ul > {/ * to configure routing rules */} {/* Switch indicates that if you match the route, you will not match it further. If you do not write the Switch, you will match it all the way to 404 page. */} <Redirect from='/user' to='/list'></Redirect> <Route path='/' component={Home}></Route> <Route path='/list' component={List}></Route> <Route path='/user' component={User}></Route> <Route path='/detail/:id' Component ={Detail}></Route> {/* No path is written to match all paths */} <Route component={Error}></Route> </Switch> </>)}} export default App;Copy the codeOperation effect:
