React Routing

The installation

// Install the React routing component library
yarn add react-router-dom
Copy the code

The primary routing

SRC directory, UI library for bootstrap

// index.js
import React from "react"
import ReactDOM from "react-dom"
import {BrowserRouter} from "react-router-dom"

import App from "./App"

const element = <BrowserRouter><App/></BrowserRouter>

ReactDOM.render(element,document.getElementById("root"));
Copy the code

// App.js
import React, { Component } from 'react'

import Header from "./components/Header"
import MyRouter from "./components/MyRouter"
import MyRender from "./components/MyRender"

export default class App extends Component {
    render() {
        return (
            <div className="container">
                <Header/>
                <MyRouter/>
                <MyRender/>
            </div>)}}Copy the code

// Header
import React, { Component } from 'react'

export default class Header extends Component {
    render() {
        return (
            <div className="page-header">
                <h1>React Routing components<small>react-router-dom</small></h1>
            </div>)}}Copy the code

// MyRouter
import React, { Component } from 'react'
import {NavLink} from "react-router-dom"

export default class MyRouter extends Component {
    render() {
        return (
            <div>
                <NavLink className="btn btn-primary" to="/home">Home</NavLink>
                &nbsp;
                <NavLink className="btn btn-primary" to="/about">About</NavLink>
            </div>)}}Copy the code

// MyRender
import React, { Component } from 'react'
import {Route,Switch,Redirect} from "react-router-dom"

import Home from ".. /.. /pages/Home"
import About from ".. /.. /pages/About"

export default class MyRender extends Component {
    render() {
        return (
            <Switch>
                <Route path="/home" component={Home}></Route>
                <Route path="/about" component={About}></Route>
                <Redirect to="/about" />
            </Switch>)}}Copy the code

NPM start should look something like this

On the blackboard:

// MyRouter
import {Route,Switch,Redirect} from "react-router-dom"
Copy the code

Route in MyRouter component is used to register the Route component. Switch is used to match a single component

<div>
    <Route path="/home" component={Home}></Route>
    <Route path="/about" component={About}></Route>
    <Route path="/about" component={Home}></Route>
    <Redirect to="/about" />
</div>
Copy the code

If the path is the same but matches two components, you can use the Switch to match only the first one and not continue the match

// MyRouter
<Switch>
    <Route path="/home" component={Home}></Route>
    <Route path="/about" component={About}></Route>
    <Route path="/about" component={Home}></Route>
    <Redirect to="/about" />
</Switch>
Copy the code

Redirect is a route redirection, avoiding the first load and leaving the content empty. You can modify it to the following image and see the changes on the page

<Redirect to="/home" />
Copy the code

NavLink supports the active version of NavLink. NavLink supports the active version of NavLink. Add activeClassName = “style name”. Since the active class name is the same as the bootstrap name, you can manually replace other custom class names

<NavLink activeClassName="active" className="btn btn-primary" to="/home">Home</NavLink>
Copy the code

A trick to encapsulate a custom NavLink component, {… This. Props} will structure props

// MyNavLink
import React, { Component } from 'react'
import {NavLink} from "react-router-dom"

export default class MyNavLink extends Component {
    render() {
        console.log(this.props);
        return (
            <NavLink activeClassName="active" className="btn btn-primary" {. this.props} / >)}}Copy the code

Modify the MyRouter component

// MyRouter
import React, { Component } from 'react'

import MyNavLink from ".. /MyNavLink"

export default class MyRouter extends Component {
    render() {
        return (
            <div>
                <MyNavLink to="/home" children="Home" />
                &nbsp;
                <MyNavLink to="/about" children="About" />
            </div>)}}Copy the code

Avoid repeatedly adding the activeClassName property, with the value of children, as shown below

<MyNavLink to="/home" children="Home" />
// The top and bottom are the same
<MyNavLink to="/home">Home</MyNavLink>
// Notice the value of console.log in MyNavLink to understand the use of the children attribute
Copy the code

Embedded routines by

SRC directory

// Message
import React, { Component } from 'react'

export default class Message extends Component {
    render() {
        return (
            <div>
                This page is Message
            </div>)}}Copy the code

// News
import React, { Component } from 'react'

export default class News extends Component {
    render() {
        return (
            <div>
                This page is News
            </div>)}}Copy the code

Next, modify the Home component content

// Home
import React, { Component } from 'react'
import {Switch,Route,Redirect} from "react-router-dom"

import MyNavLink from ".. /.. /components/MyNavLink"

import Message from "./Message"
import News from "./News"

export default class Home extends Component {
    render() {
        return (
            <div>
                <h2>This page is Home</h2>
                <div>
                    <MyNavLink to="/home/message" children="message" />
                    &nbsp;
                    <MyNavLink to="/home/news" children="news" />
                </div>
                <div>
                    <Switch>
                        <Route path="/home/message" component={Message} />
                        <Route path="/home/news" component={News} />
                        <Redirect to="/home/message" />
                    </Switch>
                </div>
            </div>)}}Copy the code

The renderings are as follows

Multi-level routing can be used in the same way

Routing and the cords

The Detail component is added in the SRC directory, and the Message component is modified at one level

// Detail
import React, { Component } from 'react'

export default class Detail extends Component {
    render() {
        console.log(this.props);
        return (
            <div>
                <h4>This page is detail</h4>
                <div>
                    <p>id:xx</p>
                    <p>title:xxxx</p>
                    <p>content:xxxxxx</p>
                </div>
            </div>)}}Copy the code

// Message
import React, { Component } from 'react'
import {Link,Route} from "react-router-dom"

import Detail from ".. /.. /.. /components/Detail"

export default class Message extends Component {
    render() {
        return (
            <div>
                <h3>This page is Message</h3>
                <div>
                    <Link className="btn btn-info" to="/home/message/detail">detail-01</Link>
                    &nbsp;
                    <Link className="btn btn-info" to="/home/message/detail">detail-02</Link>
                    &nbsp;
                    <Link className="btn btn-info" to="/home/message/detail">detail-03</Link>
                </div>
                <Route path="/home/message/detail" component={Detail} />
            </div>)}}Copy the code

The renderings are as follows

Params mass participation

Modify part of the Message component

// Message
<div>
    <Link className="btn btn-info" to="/home/message/detail/01">detail-01</Link>
    &nbsp;
    <Link className="btn btn-info" to="/home/message/detail/02">detail-02</Link>
    &nbsp;
    <Link className="btn btn-info" to="/home/message/detail/03">detail-03</Link>
</div>
<Route path="/home/message/detail/:id" component={Detail} />
Copy the code

Click the detail-01 button and notice what’s in the red box

Click match in the red box and you’ll see that the params id 01 is the parameter passed in, followed by the title

Modify part of the Message component

// Message
<div>
    <Link className="btn btn-info" to="/home/message/detail/01/Hello React">detail-01</Link>
    &nbsp;
    <Link className="btn btn-info" to="/home/message/detail/02/Hello Vue">detail-02</Link>
    &nbsp;
    <Link className="btn btn-info" to="/home/message/detail/03/Hello Angular">detail-03</Link>
</div>
<Route path="/home/message/detail/:id/:title" component={Detail} />
Copy the code

Click match in the red box and you’ll see that the params id 01 is the parameter passed in, followed by the title

So that’s pretty obvious, so let’s go ahead and display the contents in the Detail component and let’s change the Detail component first

// Detail
import React, { Component } from 'react'

const data = [
    {
        id:"01".content:"Hello React"
    },
    {
        id:".".content:"Hello Vue"
    },
    {
        id:"3".content:"Hello presents"}]export default class Detail extends Component {
    render() {
        console.log(this.props);
        const {id,title} = this.props.match.params;
        const resultContent = data.find((item,index,arr) = > {
            return item.id === id;
        });  // The array's find function finds the qualified object and returns it
        return (
            <div>
                <h4>This page is detail</h4>
                <div>
                    <p>id:{id}</p>
                    <p>title:{title}</p>
                    <p>content:{resultContent.content}</p>
                </div>
            </div>)}}Copy the code

The renderings are as follows

Query parameter passing (search)

Modify the contents of the Message component. Remember that the contents of the Detail component also need to be modified to avoid errors

// Message
import React, { Component } from 'react'
import {Link,Route} from "react-router-dom"

import Detail from ".. /.. /.. /components/Detail"

export default class Message extends Component {
    render() {
        return (
            <div>
                <h3>This page is Message</h3>
                <div>
                    <Link className="btn btn-info" to="/home/message/detail/? id=01&title=Hello React">detail-01</Link>
                    &nbsp;
                    <Link className="btn btn-info" to="/home/message/detail/? id=02&title=Hello Vue">detail-02</Link>
                    &nbsp;
                    <Link className="btn btn-info" to="/home/message/detail/? id=03&title=Hello Angular">detail-03</Link>
                </div>
                <Route path="/home/message/detail" component={Detail} />
            </div>)}}Copy the code

Click the detail-01 button

Note that the search value cannot be used directly. Use the QueryString library. React is ready to modify the Detail component

// Detail
import React, { Component } from 'react'
import qs from "querystring"

const data = [
    {
        id:"01".content:"Hello React"
    },
    {
        id:".".content:"Hello Vue"
    },
    {
        id:"3".content:"Hello presents"}]export default class Detail extends Component {
    render() {
        console.log(this.props);
        const {id,title} = qs.parse(this.props.location.search.slice(1));// The question mark is not needed
        const resultContent = data.find((item,index,arr) = > {
            return item.id === id;
        });  // The array's find function finds the qualified object and returns it
        return (
            <div>
                <h4>This page is detail</h4>
                <div>
                    <p>id:{id}</p>
                    <p>title:{title}</p>
                    <p>content:{resultContent.content}</p>
                </div>
            </div>)}}Copy the code

The renderings are as follows

The state transfer and

Modify the contents of the Message component. Remember that the contents of the Detail component also need to be modified to avoid errors

// Message
import React, { Component } from 'react'
import {Link,Route} from "react-router-dom"

import Detail from ".. /.. /.. /components/Detail"

export default class Message extends Component {
    render() {
        return (
            <div>
                <h3>This page is Message</h3>
                <div>
                    <Link className="btn btn-info" to={{pathname:"/home/message/detail",state:{id:"01",title:"Hello React}}} ">detail-01</Link>
                    &nbsp;
                    <Link className="btn btn-info" to={{pathname:"/home/message/detail",state:{id:"02",title:"Hello Vue}}} ">detail-02</Link>
                    &nbsp;
                    <Link className="btn btn-info" to={{pathname:"/home/message/detail",state:{id:"03",title:"Hello Angular}}} ">detail-03</Link>
                </div>
                <Route path="/home/message/detail" component={Detail} />
            </div>)}}Copy the code

Note the state of the console

Detail component content

// Detail
import React, { Component } from 'react'

const data = [
    {
        id:"01".content:"Hello React"
    },
    {
        id:".".content:"Hello Vue"
    },
    {
        id:"3".content:"Hello presents"}]export default class Detail extends Component {
    render() {
        console.log(this.props);
        const {id,title} = this.props.location.state;
        const resultContent = data.find((item,index,arr) = > {
            return item.id === id;
        });  // The array's find function finds the qualified object and returns it
        return (
            <div>
                <h4>This page is detail</h4>
                <div>
                    <p>id:{id}</p>
                    <p>title:{title}</p>
                    <p>content:{resultContent.content}</p>
                </div>
            </div>)}}Copy the code

The renderings are as follows

The Home and message buttons have changed to dark blue instead of red. This is a loss of style. Modify index.html

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <! -- <link rel="stylesheet" href="./index.css"> -->
    <link rel="stylesheet" href="%PUBLIC_URL%/index.css"> <! Contrast this with the content of the comment -->
</head>
<body>
    <div id="root"></div>
</body>
</html>
Copy the code

Programmatic routing jumps

Notice the red box below

Modify the Detail component content

// Detail
import React, { Component } from 'react'

const data = [
    {
        id:"01".content:"Hello React"
    },
    {
        id:".".content:"Hello Vue"
    },
    {
        id:"3".content:"Hello presents"}]export default class Detail extends Component {
    render() {
        console.log(this.props);
        const {id,title} = this.props.location.state;
        const resultContent = data.find((item,index,arr) = > {
            return item.id === id;
        });  // The array's find function finds the qualified object and returns it
        return (
            <div>
                <h4>This page is detail</h4>
                <div>
                    <p>id:{id}</p>
                    <p>title:{title}</p>
                    <p>content:{resultContent.content}</p>
                    <div>
                        <button className="btn btn-success">forward</button>
                        &nbsp;
                        <button className="btn btn-success">back</button>
                        &nbsp;
                        <button className="btn btn-success">jump</button>
                    </div>
                </div>
            </div>)}}Copy the code

Write forward, backward, jump events and bind events

/ / to go forward
handleGoForward = () = > {
    this.props.history.goForward();
}

/ / back
handleGoBack = () = > {
    this.props.history.goBack();
}

/ / jump
handleGo = () = > {
    this.props.history.go(-2);
}

// Message 
<p>id:{id}</p>
<p>title:{title}</p>
<p>content:{resultContent.content}</p>
<div>
    <button className="btn btn-success" onClick={this.handleGoForward}>forward</button>
    &nbsp;
    <button className="btn btn-success" onClick={this.handleGoBack}>back</button>
    &nbsp;
    <button className="btn btn-success" onClick={this.handleGo}>jump</button>
</div>
Copy the code

Common components are transformed into routing components

First modify the Header component

// Header
import React, { Component } from 'react'

class Header extends Component {
    / / to go forward
    handleGoForward = () = > {
        this.props.history.goForward();
    }

    / / back
    handleGoBack = () = > {
        this.props.history.goBack();
    }

    / / jump
    handleGo = () = > {
        this.props.history.go(-2);
    }

    handleNav = () = > {
        this.props.history.push("/home/message/detail", {id:".".title:"I'm Dicja, and I'm gonna save the world."});
    }

    render() {
        return (
            <div className="page-header">
                <h1>React Routing components<small>react-router-dom</small></h1>
                <div>
                    <button className="btn btn-success" onClick={this.handleGoForward}>forward</button>
                    &nbsp;
                    <button className="btn btn-success" onClick={this.handleGoBack}>back</button>
                    &nbsp;
                    <button className="btn btn-success" onClick={this.handleGo}>jump</button>
                    &nbsp;
                    <button className="btn btn-success" onClick={this.handleNav}>Programming navigation</button>
                </div>
            </div>)}}export default Header
Copy the code

The following figure

The props of the Header component does not provide a routing API, so the withRouter is required to modify the content of the Header component

// Header 
import React, { Component } from 'react'
import {withRouter} from "react-router-dom"

class Header extends Component {
    / / to go forward
    handleGoForward = () = > {
        this.props.history.goForward(); }...export default withRouter(Header)
Copy the code

By the way, there are two kinds of route redirection. By default, push will record the navigation history, while replace will not

The installation

The primary routing

Embedded routines by

Routing and the cords

Params mass participation

Query parameter passing (search)

The state transfer and

Programmatic routing jumps

Common components are transformed into routing components

Related Posts

22 Lessons programmers learned from programming

Best practice | how to use tencent micro cloud development enterprise portal application from 0 to 1 set up

The Builder pattern of the gossip design pattern