React routing foundation and transmission parameters

react-router-dom

1、react A plug-in for , Designed to achieve a single page .

2、 be based on react It is basically used in all projects .

Basic use of routing

1、 The label of route navigation area is Link or NavLink label

<Link to="/xxx">xxx</Link>

<NavLink to="/xxx">xxx</NavLink>

NavLink The tag will add... For the current matching route "active" Class name , We can go through activeClassName To change its default class name

tips： The contents of all component bodies can be through this.props.children obtain , If the tag attribute children It can also be done through this.props.children obtain .

eg: <NavLink to="/xxx">xxx</NavLink> Equate to <NavLink to="/xxx" children="xxx" />

2、 Route display area write Route Label for path matching

<Route path="/xxx" component={xxx}>

3、App Wrap one on the outside <BrowserRouter> or <HashRouter>

import './App.css';
import Hello from "./component/hello/index"
import Bea from "./component/bea/index"
import { Link,NavLink, BrowserRouter, Route } from "react-router-dom";
function App() {
  return (
    <div className="App">
      {/*  Need package routing , Need to be wrapped in the outermost layer , The best way is to wrap directly App Components  */}
      <BrowserRouter>
        <p>react router!</p>
        {/* <Hello name='deng'/>
      <Bea /> */}
        <div className='list'>
          {/* <Link className='item-link' to="/bea">bea Components </Link>
          <Link className='item-link' to="/hello">hello Components </Link> */}

          <NavLink className='item-link' activeClassName='routeActive' to="/bea">bea Components </NavLink>
          <NavLink className='item-link' activeClassName='routeActive' to="/hello">hello Components </NavLink>
        </div>
        <div className='show-area'>
          {/*  Registered routing  */}

          <Route path="/bea" component={Bea}></Route>
          <Route path="/hello" component={Hello}></Route>

        </div>
      </BrowserRouter>
    </div>

  );
}

export default App;

Routing components and general components

1. The writing is different

General components ：<Demo />

Routing component ：<Route path="/demo" component={Demo} />

2. Different storage locations

General components ：components

Routing component ：pages

3. The received props Different

General components ： What is passed when writing component labels , Can receive anything

Routing component ： Received three fixed attributes history location match

switch Use

When multiple routes are written the same ,react All the components corresponding to the route will be displayed . It can be used switch Package routing , such react After a route is matched, it will not continue to match .

Don't use switch when ：

Use switch when ：

import './App.css';
import Hello from "./component/hello/index"
import Bea from "./component/bea/index"
import { Link, NavLink, Switch, BrowserRouter, Route } from "react-router-dom";
function App() {
  return (
    <div className="App">
      {/*  Need package routing , Need to be wrapped in the outermost layer , The best way is to wrap directly App Components  */}
      <BrowserRouter>
        <p>react router!</p>
        {/* <Hello name='deng'/>
      <Bea /> */}
        <div className='list'>
          {/* <Link className='item-link' to="/bea">bea Components </Link>
          <Link className='item-link' to="/hello">hello Components </Link> */}

          <NavLink className='item-link' activeClassName='routeActive' to="/bea">bea Components </NavLink>
          <NavLink className='item-link' activeClassName='routeActive' to="/hello">hello Components </NavLink>

        </div>
        <div className='show-area'>
          {/*  Registered routing  */}
          <Switch>
            <Route path="/bea" component={Bea}></Route>
            <Route path="/hello" component={Hello}></Route>
            <Route path="/hello" component={Hello}></Route>
          </Switch>
        </div>
      </BrowserRouter>
    </div>

  );
}

export default App;

Strict matching and fuzzy matching of routes

react Route matching defaults to fuzzy matching , namely /bea/a It can match /bea Of , however /a/bea Can't match to /bea, It needs to meet the leftmost matching .

Set up exact by true Strict matching can be turned on

<Route exact path="/bea" component={Bea}></Route>

Be careful ： The strict matching mode should not be turned on casually , It needs to be reopened , Because sometimes opening may cause failure to match the secondary route .

Redirect Use

Redirect Components need to be placed at the bottom of the registered route , Indicates when the route does not match , Jump to the specified route .

import './App.css';
import Hello from "./component/hello/index"
import Bea from "./component/bea/index"
import { Link, NavLink, Switch, BrowserRouter, Route, Redirect } from "react-router-dom";
function App() {
  return (
    <div className="App">
      {/*  Need package routing , Need to be wrapped in the outermost layer , The best way is to wrap directly App Components  */}
      <BrowserRouter>
        <p>react router!</p>
        <div className='row'>
          <div className="col-md-4 row-item">.col-md-4</div>
          <div className="col-md-4 row-item">.col-md-4</div>
          <div className="col-md-4 row-item">.col-md-4</div>
        </div>
        {/* <Hello name='deng'/>
      <Bea /> */}
        <div className='list'>
          {/* <Link className='item-link' to="/bea">bea Components </Link>
          <Link className='item-link' to="/hello">hello Components </Link> */}

          <NavLink className='item-link' activeClassName='routeActive' to="/a/bea">bea Components </NavLink>
          <NavLink className='item-link' activeClassName='routeActive' to="/a/hello">hello Components </NavLink>

        </div>
        <div className='show-area'>
          {/*  Registered routing  */}
          <Switch>
            <Route path="/a/bea" component={Bea}></Route>
            <Route path="/a/hello" component={Hello}></Route>
            <Route path="/a/hello" component={Hello}></Route>
            <Redirect to="/a/bea" />
          </Switch>
        </div>
      </BrowserRouter>
    </div>

  );
}
export default App;

Nested Route

1、 When registering a child route, add the parent route path value

2、 Routes are matched in the order in which they are registered

Pass parameters to the routing component

Method 1 ： Pass on params Parameters

Jump route （Link、NavLink） Behind the path , Pass in path format params Parameters , Then show the components in the route (Route)path Property through “/:xxx” Declare what to receive in the form of params Participation . In this way, in the component corresponding to the route, you can props.match.params The routing parameters passed in .

import React, { Component } from "react";
import Details from './details/index';
import { Link, Route } from 'react-router-dom';

export default class Message extends Component {
    state = {
        messageList: [
            { id: 1, name: ' news 1: Come on, Jiangxi ！' },
            { id: 2, name: ' news 2: Come on, Guangdong ！' },
            { id: 3, name: ' news 3: Come on, Jiangsu ！' },
        ]
    };
    render() {
        const { messageList } = this.state;
        return (
            <div>
                {
                    messageList.map(ele => {
                        return <p style={
   {
                            textAlign: 'left'
                        }} key={ele.id}>
                            {/*  Pass parameters to the routing component  */}
                            <Link to={`/hello/message/detail/${ele.id}/${ele.name}`}>{ele.name}</Link>
                        </p>
                    })
                }
                {/*  Declare receive parameters  */}
                <Route path='/hello/message/detail/:id/:name' component={Details}></Route >
            </div>
        )
    }
}

import React, { Component } from 'react'

const messageList = [
    { id: 1, content: ' Tomorrow will be better ！' },
    { id: 2, content: ' I believe I am who I am ！' },
    { id: 3, content: ' You can do it ！' },
]
export default class Details extends Component {
    render() {
        // Receive the parameters passed by the route 
        const { id, name } = this.props.match.params;
        const content = messageList.find(ele => {
            return ele.id == id;
        })
        return (
            <div>
                <p>ID: {id}</p>
                <p>{name}</p>
                <p> Content ：{content.content}</p>
            </div>
        )
    }
}

Method 2 ： Pass on search Parameters

By means of Link perhaps NavLink Components are represented by urlencode The way to pass parameters , In this way, in the component corresponding to the route, you can props.location.search Receive the routing parameters passed in .

import React, { Component } from "react";
import Details from './details/index';
import { Link, Route } from 'react-router-dom';

export default class Message extends Component {
    state = {
        messageList: [
            { id: 1, name: ' news 1: Come on, Jiangxi ！' },
            { id: 2, name: ' news 2: Come on, Guangdong ！' },
            { id: 3, name: ' news 3: Come on, Jiangsu ！' },
        ]
    };
    render() {
        const { messageList } = this.state;
        return (
            <div>
                {
                    messageList.map(ele => {
                        return <p style={
   {
                            textAlign: 'left'
                        }} key={ele.id}>
                            {/*  Pass... To the routing component search Parameters  */}
                            <Link to={`/hello/message/detail?id=${ele.id}&name=${ele.name}`}>{ele.name}</Link>
                        </p>
                    })
                }

                {/* search There is no need to declare receipt  */}
                <Route path='/hello/message/detail' component={Details}></Route >
            </div>
        )
    }
}

Acquired search The parameter is unresolved , It can be used react It's already done qs Module to parse urlencode Encoded string

import React, { Component } from 'react'
import qs from "qs";
const messageList = [
    { id: 1, content: ' Tomorrow will be better ！' },
    { id: 2, content: ' I believe I am who I am ！' },
    { id: 3, content: ' You can do it ！' },
]
export default class Details extends Component {
    render() {
        // Receive route search Parameters 
        const searchStr = this.props.location.search;
        const search = qs.parse(searchStr.slice(1));
        const content = messageList.find(ele => {
            return ele.id == search.id;
        })
        return (
            <div>
                <p>ID: {search.id}</p>
                <p>{search.name}</p>
                <p> Content ：{content.content}</p>
            </div>
        )
    }
}

Method 3 ： Pass on state Parameters

By means of Link perhaps NavLink In the component ,to Pass an object ,pathname Property is jump path ,state Route parameters passed for

import React, { Component } from "react";
import Details from './details/index';
import { Link, Route } from 'react-router-dom';

export default class Message extends Component {
    state = {
        messageList: [
            { id: 1, name: ' news 1: Come on, Jiangxi ！' },
            { id: 2, name: ' news 2: Come on, Guangdong ！' },
            { id: 3, name: ' news 3: Come on, Jiangsu ！' },
        ]
    };
    render() {
        const { messageList } = this.state;
        return (
            <div>
                {
                    messageList.map(ele => {
                        return <p style={
   {
                            textAlign: 'left'
                        }} key={ele.id}>
                            {/*  Pass... To the routing component state Parameters  */}
                            <Link to={
   { pathname: `/hello/message/detail`, state: { id: ele.id, name: ele.name } }}>{ele.name}</Link>
                        </p>
                    })
                }
                 {/* state There is no need to declare receipt  */}
                <Route path='/hello/message/detail' component={Details}></Route >
            </div>
        )
    }
}

adopt props.location.state Receive passed parameters

import React, { Component } from 'react'
import qs from "qs";
const messageList = [
    { id: 1, content: ' Tomorrow will be better ！' },
    { id: 2, content: ' I believe I am who I am ！' },
    { id: 3, content: ' You can do it ！' },
]
export default class Details extends Component {
    render() {
        // Receive route state Parameters 
        const state = this.props.location.state;
        const content = messageList.find(ele => {
            return ele.id == state.id;
        })
        return (
            <div>
                <p>ID: {state.id}</p>
                <p>{state.name}</p>
                <p> Content ：{content.content}</p>
            </div>
        )
    }
}

summary ： The three methods of transmitting routing parameters are very common