The route of react router DOM react

1. React routing is now version 4. + using react router Dom and version 3. + using react router
2. There are two modes of routing

• The hash mode provided by the old browser, we call it: HashRouter
• The hstory pattern provided by H5 is called BrowserRouter
  Note: routing in H5 mode requires back-end support

Route building

hash route (HashRouter route)

First install react router DOM NPM I react router DOM - s Yarn add react router DOM

Configure router in the entry file

index.js file code

//Configure router in the entry file
import { HashRouter as Router } from 'react-router-dom'   // hash routing

ReactDOM.render(
    <Router>   //Wrap the App with Router
        <App />
    </Router>,
document.getElementById('root')
);

Configure routing in App.js

    
import React from 'react';
import './App.css';
import { Route,Switch } from 'react-router-dom'//Switch indicates that the Route will be exactly matched after use. Note that here is Route. You are Route

import Home from './pages/home'//These files need to be created and routed by yourself
import List from './pages/list'
import Shop from './pages/shop'
import Login from ' ./pages/Login '


function App() {
    return (
        <div className="App">
            <a href = " #/Home "> Home </a>//hash needs to be marked
            <a href = " #/List "> Home </a>
            <a href = " #/Shop "> Home </a>
            <a href = " #/Shop/login "> Home </a>
            <Switch>
                <Route path = "/" component = { Home } exact></Route>  //Redirect, the page opens the page that jumps directly. If you do not add exact, two contents will appear
                <Route path = "/Home" component = { Home } ></Route>//Do not add a dot before the path. Component jumps to the representation component
                <Route path = "/List" component = { List }></Route>  // It's Route, not Router
                <Route path = "/Shop" component = { Shop } exact></Route>
                //Two level routing
                <Route path = "/Shop/login" component = { Shop } render = { ()=>{ return <div> login </div> } }></Route>
            </Switch>
        </div>
    );
}
export default App;

Two level routing

        //Function can return a structure
    <Route path = "/Shop/login" component = { Shop } render = { ()=>{ return <div> login </div> } }></Route>
    
    //You can also return a component. The components behind the component should be changed correspondingly. There are many ways to write it. You can write it in any way
    <Route path = "/Shop/login" component = { Shop } render = { ()=>{ return <Login /> } }></Route>
    <Route path = "/Shop/login" component = { Shop } render = { ()=>{ return Login } }></Route>
    <Route path = "/Shop/login" component = { Shop } render = { ()=>{ return { Login } </div> } }></Route>
    
    //  Another way to write is to write the secondary route in the subcomponent. The corresponding secondary route and subcomponent are written in a folder
    
    
import React,{Component} from 'react';
import { NavLink,Route } from 'react-router-dom'

import Login from './Login.js'
import Register from './Register.js'

class Shop extends Component{

    componentWillUpdate () {
        console.log('luyou gaibian ')
    }
    
    render () {
        return (
            <div>
                Shop
                <NavLink to = "/shop/login"> Sign in </NavLink>
                <NavLink to = "/shop/register"> register </NavLink>

                <NavLink to = "/shop"> a </NavLink>
                <NavLink to = "/shop"> b </NavLink>

                //Routing display area
                <Route path = "/shop/login" component = { Login }></Route>
                <Route path = "/shop/register" component = { Register }></Route>
            </div>
        )
    }
}
export default Shop

history route of H5 (BrowserRouter route)

First install react router DOM NPM I react router DOM - s Yarn add react router DOM

Configure router in the entry file

index.js file code

//Configure router in the entry file
import { BrowserRouter as Router } from 'react-router-dom'   // The history mode of h5

ReactDOM.render(
    <Router>   //Wrap the App with Router
        <App />
    </Router>,
document.getElementById('root')
);

Configure in App.js

The difference between Link and navlink is that navlink can render the active route, while Link is just a normal route

    
import React from 'react';
import './App.css';

import { Route,Link,Switch,NavLink} from 'react-router-dom'//Switch means to render only one


import Home from './pages/home'
import List from './pages/list'
import Shop from './pages/shop'

function App() {
    return (
        <div className="App">
        
        //After using NavLink, you can't use the href. You need to change it to h5 without the ugly little well number
            <NavLink activeClassName = "active" to = "/Home" > Home </NavLink>
            <NavLink activeClassName = "active" to = "/List"> List </NavLink>
            <NavLink activeClassName = "active" to = "/Shop"> Shop </NavLink>
            <NavLink activeClassName = "active" to = "/shop/login"> login </NavLink>//Two level routing
            
            <Switch>//Render only one
                <Route path = "/" component = { Home } exact></Route>
                <Route path = "/Home" component = { Home } ></Route>
                <Route path = "/List" component = { List }></Route>
                <Route path = "/Shop" component = { Shop } exact></Route>
                <Route path = "/Shop/login" component = { Shop } render = { ()=>{ return <div> login </div> } }></Route>
                
                //Wrong route matching must be written in < Switch >, otherwise the content of wrong route will be displayed all the time. Write component directly instead of path
                <Route component = { Error }></Route>
            </Switch>
        </div>
    );
}
export default App;

Activate routing

       //Use NavLink to write an active class name style in App.css. The class name should be repeated carefully, and then use activeClassName = "class name"
       
        <NavLink activeClassName = "active" to = "/Home" > Home </NavLink>