React Routing

Routing in React is similar to routing in VUE, but there are some differences between the two frameworks. Just as Vue has vue-router, React has its own routing implementation: React-touter

react-router-dom

React-router-dom is a rewrap for the browser environment

The installation

npm install react-router-dom --save
Copy the code

The basic use

BrowserRouter

To use routing, the page must be wrapped in the BrowserRouter tag. The component wrapped in the BrowserRouter has a history property, and routing is implemented through the History object

Link

The Link label is the encapsulated A label, which can be understood as a Link. The given TO attribute indicates the route to jump to

<Link  to="/about">About</Link>
Copy the code

Route

The Route tag is a container of routing component components, used to match routes and display the corresponding routing components. The Path attribute indicates the matched Route, and the Component indicates the bound routing components

<Route path="/about" component={About}></Route>
Copy the code

The basic routing implementation is as follows

import React, { Component } from "react";
import { BrowserRouter, Link, Switch, Route } from "react-router-dom";
import Category from "./category";
import User from "./user";
import Article from "./article";
class Home extends Component {
    state = {};
    render() {
        return (
            <BrowserRouter>
                <div className="home">
                    <header className="header">The head</header>
                    <div className="container">
                        <nav className="left">
                            <Link to="/category">Program management</Link>
                            <Link to="/article">The article management</Link>
                            <Link to="/user">User management</Link>
                        </nav>
                        <div className="right">
                            <Route path="/category" component={Category}></Route>
                            <Route path="/article" component={Article}></Route>
                            <Route path="/user" component={User}></Route>
                        </div>
                    </div>
                </div>
            </BrowserRouter>); }}export default Home;
Copy the code

NavLink

NavLink is a special Link. By default, NavLink is appended with an active class when clicked. The append class name can be changed with activeClassName=””

<NavLink activeClassName="active111" to="/home">Home</NavLink>
Copy the code

Routing matching

switch

By default, if a route with the same name exists, both routes are matched. Therefore, a Switch label is usually wrapped around a route. In the Switch label, when a route matches a component, it does not continue to match down.

<Switch>
    <Route path="/category" component={Category}></Route>
    <Route path="/article" component={Article}></Route>
    <Route path="/user" component={User}></Route>
</Switch>
Copy the code

An exact match

By default, routes are divided into units by/and matched from front to back. As long as the front part of the path meets the path of the route, the content behind the path is not taken care of, for example

<MyNavLink to="/home/1/2/3">Home</MyNavLink>

Copy the code

Can match

<Route path="/home" component={Home}/>
Copy the code

But if you want the route to match exactly, you can use exact matching only if the path is exactly the same.

<Route exact path="/home" component={Home}/>
Copy the code

Redirect

In a real world project, the redirect is used when you go to the Web and a route is displayed by default

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

Nested routing

Nested routes are required. You only need to use the Route in the parent Route and add the path of the parent Route to the Route path

The parent route

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

Zi lu by

<Switch>
    <Route path="/home/user" component={user}/>
    <Route path="/home/list" component={List}/>
</Switch>
Copy the code

Routing and the cords

The React route has three parameter transmission modes

Params mass participation

Prams passes the parameter, the parameter is displayed in the URL, and you need to declare the parameter you pass

<Link to='/home/user/1/zhangsan'>Zhang SAN</Link>{/* Declare params parameter */}<Route path="/home/user/:id/:name" component={Detail}/>
Copy the code

When the parameter is received, it is in this.props. Mate.params

Query the participation

<Link to='/home/user? id=1&name=zhangsan'>Zhang SAN</Link>
Copy the code

The Link tag’s to attribute can also pass an object in the same way as above

<Link to={{ pathname: '/home/user'.search: qs.stringify({ id: 1.name: 'zhangsan'}}}> </Link>Copy the code

Accept parameters, the parameters in this. Props. Location. In the search

The state transfer and

<Link to={{pathname:'/home/user'.state: {id:1.name:'zhangsan'}}} > * * < / Link >Copy the code

Accept parameters, the parameters in this. Props. Location. In the state

Programmatic navigation

The History object in the routing component has API methods for manipulating routes

push()

Add an entry to history

this.props.history.push(`/home/user`,{id,name})
Copy the code

replace()

Replaces the current record

this.props.history.replace(`/home/user`,{id,name})
Copy the code

go(n)

this.props.history.go(n)
Copy the code

N >0 means forward, n<0 means backward

goBack()

back

this.props.history.goBack()
Copy the code

goForward()

forward

this.props.history.goForward()
Copy the code

withRouter

Unlike VUE, each instance of vUE has a $Router object that can be jumped to at will. In React, only the instance of the routing component has a history object, so in a normal component, withRouter() is used to process the component if you want to programmatically navigate to the route

import {withRouter} from 'react-router-dom'
// When exporting the component, process the component with the withRouter(Header) property with the history object
export default withRouter(Header)
Copy the code