Note: Lots of screenshot GIFs.

Basic Routing

1. Routing links: Nav and NavLink are Nav
NavLink is a specific version of Nav, NavLink can be highlighted, you can set the selected className.Copy the code
     <div className="box">
        <div className="left-nav">
          <div className="linkbtn">
            <Link to="/home">home</Link>
          </div>
          <div className="linkbtn">
            <Link to="/about">about</Link>
          </div>
        </div>
      </div>
Copy the code

    <div className="box">
        <div className="left-nav">
          <div className="linkbtn">
            <NavLink to="/home">home</NavLink>
          </div>
          <div className="linkbtn">
            <NavLink to="/about">about</NavLink>
          </div>
        </div>
      </div>
Copy the code

Nav and NavLink can change the route. The difference is that NavLink currently has the corresponding class (default is active). If highlighted, NavLink should be selected. ClassName
home

2. Register routes
      <div class="right-content">
          <Route path="/home" component={Home}></Route>
          <Route path="/about" component={About}></Route>
       </div>
Copy the code

The value of path is the same as the value of the NavLink to attribute, and the corresponding component is rendered.

In order to improve efficiency and reduce route matching, we usually cover a Switch label on the outside. Once a route is successfully matched, it will not continue to be matched downward.
    <div className="box">
        <div className="left-nav">
          <NavLink to="/home/person" className="linkbtn" activeClassName="activeLink">
            home
          </NavLink>
          <NavLink to="/about" className="linkbtn">
            about
          </NavLink>
        </div>
        <div class="right-content">
          <Route path="/home" component={Home}></Route>
          <Route path="/about" component={About}></Route>
          <Route path="/home/person" component={Person}></Route>
        </div>
      </div>
Copy the code

Click ‘/home /person ‘and the route matches ‘/home’ first and then ‘/home /person’. By default, the route matches ‘/home’ and then ‘/home /person ‘, so both matches are qualified and rendered.

    <div class="right-content">
        <Switch>
          <Route path="/home" component={Home}></Route>
          <Route path="/about" component={About}></Route>
          <Route path="/home/person" component={Person}></Route>
        </Switch>
    </div>
Copy the code

At this point, once the route is matched, it does not proceed further, so only the first matched component Home is rendered.

To accurately match routes, set the exact attribute

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

The match will be ‘/home/person’, the third route, rendering the Person component

Two set routines by

Add another layer of routing to the home component:

//app.js
 <div className="box">
        <div className="left-nav">
          <NavLink to="/home" className="linkbtn" activeClassName="activeLink">
            home
          </NavLink>
          <NavLink to="/about" className="linkbtn">
            about
          </NavLink>
        </div>
        <div className="right-content">
          <Switch>
            <Route path="/home" component={Home}></Route>
            <Route path="/about" component={About}></Route>
          </Switch>
        </div>
      </div>
      
//Home
 <div>
   <div>
     <NavLink to="/home/person" className="navlink"></NavLink>
     <NavLink to="/home/message" className="navlink"></NavLink>
   </div>
   <div>
     <Switch>
        <Route path="/home/person" component={Person} ></Route>
        <Route path="/home/message" component={Message} ></Route>
     </Switch>
   </div>
</div>
Copy the code

For example, the route of the Person component cannot be ‘/ Person’, but should be added to ‘/home’ of the upper level, written as’ /home ‘. Besides, the route of ‘/home’ of the first level cannot be accurately matched, otherwise it cannot reach the second level.

Three mass participation

//message.js
state={
    arr:[
      {id:1.name:'xxx1'.message:'yyyyyy1'},
      {id:2.name:'xxx2'.message:'yyyyyy2'},
      {id:3.name:'xxx3'.message:'yyyyyy3']}},render() {
    const {arr} = this.state
    return (
      <div>I am the Message component {arr.map(obj=>{return<div  key={obj.id} ><Link to="/home/message/list">{obj.name}</Link></div>})}<hr />
        <Route path="/home/message/list" component={List}></Route>
      </div>
      
    );
  }
Copy the code

When I click on the route link in the Message component, I will display the List component. The difference is that I want to show the corresponding data when I click on the message component.

(1) Params transmits parameters

//message The route link passes the parameter /value, and the route follows the parameter /:key. The parameter can be obtained from the function.match-params of the corresponding component

<div> I am the Message component {arr.map(obj= >{
            return <div  key={obj.id} ><Link to={` /home/message/list/ ${obj.id} / ${obj.name} `} >{obj.name}</Link></div>
          })
        }
        <hr />
        <Route path="/home/message/list/:id/:name" component={List}></Route>
      </div>
Copy the code

(2) Search transmits parameters

Route links are transmitted in the form of ‘key=value’, and there is no need to register routes

The receiving component can obtain this value in props.location.search (Note: Search is an urlencoded string, which needs queryString parsing).

(3) state parameter transmission

In this mode, you can not see the parameters in the address bar. If you do not want to see the values, you can use this mode to route links

The component receives the parameters passed through props. Location. state

Four push and replace

The default route is push, and each step adds a piece of data to the history, but replace should be used to pass the parameter, so that you can feel the difference: push replace

All you need to do is add the Repalce attribute to the routing link

Five summarizes

(1) routing Link with the Link and NavLink, which can complement the selected class, has the need to this effect with NavLink, such as home/about in the above example, the person/message. Use links instead, such as the three different links in the Message component. Format:
home
 Home

Router
The default Route is fuzzy matching. To match multiple routes with exact attributes, the Switch tag is packaged to improve Route matching efficiency

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

Redirect Redirect means that when a route does not match, it is redirected to the specified page. (3) There are three methods of parameter transfer:

  • Pass the params parameter
// Routing links
<Link to={`/home/message/list/${obj.id}/${obj.name}`} replace>{obj.name}</Link>
// Route registration
 <Route path="/home/message/list/:id/:name"  component={List}></Route>
 // Route receive
   const {id,name} = this.props.match.params
Copy the code
  • Pass the search parameter
// Routing links
<Link to={`/home/message/list/? id=${obj.id}&name=${obj.name}`} replace>{obj.name}</Link>
// No action is required for route registration
 <Route path="/home/message/list"  component={List}></Route>
 // Route receive
   import qs from 'querystring'
   const {id,name} =qs.parse(this.props.location.search.slice(1)) 
Copy the code
  • Pass the state argument (the address bar does not see the value)
// Routing links
<Link to={{ pathname:`/home/message/list`.state: {id:obj.id,name:obj.name}}} replace>{obj.name}</Link>
// No action is required for route registration
 <Route path="/home/message/list"  component={List}></Route>
 // Route receive
 const {id,name} =this.props.location.state||{};
Copy the code

(4) Push and replace modes During route registration, the default mode is push mode. Every time you click the route link, a data will be added to the history. Replace directly replaces the last item of data with the current clicked route, with the same number of history. Set the replace property in the route link to obtain