1. Installation depends on the latest version by default

npm i react-router react-router-dom --save-dev

2. Import main component object

import {BrowserRouter as Router,Route,Link,Redirect} from 'react-router-dom'；

3. The writing structure is inside the component and does not need to be written in the render. The Router component has only one root node. In addition to the routing component, other labels can be written
The location of the default Route is the container displayed by the routing component (tips: Link is written in the Router to form the routing structure)

 <Router>
        <div>
            <Link to="/home">home page</Link>
            <Link to="/about">about</Link>
            <Route path="/home" component={Home}></Route>
            <Route path="/about" component={About}></Route>
        </div>
    </Router>

4. Route redirection through Redirect component object, set to property

<Redirect to="/about"/>    

5. Routing parameter delivery

/a/1 ---this.props.match.params.id

/a?id=1---this.props.location.query.id

6. Skip route switching in event

this.props.history.push('/home')    

Because BrowserRouter is equivalent to < router history = {history} >, you can directly push through history
        

Higher version nested route writing:

<Router>
	<div>
	  {
		this.state.arr.map(function(item,i){
			return(
				<div key={i}>
				  <Link to={{pathname:'/detail',query:{id:item.pid}}}>{item.pname}</Link>
				</div>
			)
		})
	 }
						
	 <hr/>
	<Route path="/detail" component={Detail}></Route>
	</div>
</Router>

Then import Detail from "./detail" is introduced into the imported component

Complete code
app.js higher version routing configuration

import React, { Component } from 'react';
import {BrowserRouter as Router,Route,Link,Redirect,Switch} from 'react-router-dom'
import Home from './components/home'
import About from './components/about'
import Other from './components/other'

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>High edition routing</h1>
        
		  <Router>   
					   
			 <div>   {/* There is a root node */}
						
	        		<Link to="/home">home page</Link>
	        		<Link to="/about">about</Link>
	        		<Link to="/other">Other</Link>
	        		
	        	<Switch>     {/* Solve the red problem of the console */}

					<Route path="/home" component={Home}></Route>
					<Route path="/about" component={About}></Route>
					<Route path="/other" component={Other}></Route>
				      <Redirect to="/home"/>   {/* Route redirection */}
	        		
	        	</Switch>
        	</div>
        </Router>
        
      </div>
    );
  }
}

export default App;

 home.js

import React from 'react';
import {BrowserRouter as Router,Route,Link,Redirect,Switch} from 'react-router-dom'
import $ from 'jquery'
import Detail from './detail'
class Home extends React.Component{
	constructor(props){
		super(props)
		this.state={
			arr:[]
		}
	}
	
	tap(){
		this.props.history.push('/other')
	}
	
	render(){
		return(
			<div>
				<h1> shouye </h1>
				<button onClick={this.tap.bind(this)}>Jump other</button>
				<Router>
					<div>
						{
							this.state.arr.map(function(item,i){
								return(
									<div key={i}>
										<Link to={{pathname:'/detail',query:{id:item.pid}}}>{item.pname}</Link>
									</div>
								)
							})
						}
						
						<hr/>
		        			<Route path="/detail" component={Detail}></Route>
					</div>
				</Router>
			</div>
		)
	}
	
	componentWillMount(){
		var _this=this;
		$.ajax({
			type:"get",
			url:"http://jx.xuzhixiang.top/ap/api/productlist.php",
			dataType:'json',
			async:true,
			success:function(data){
				_this.setState({arr:data.data})
			}
		});
	}
	
	
}

export default Home;