react-router implements simple tab page switching

First picture above:

Title: Simple tab switching through routing

import React from 'react';
import logo from './logo.svg';
import './App.css';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    Redirect
} from 'react-router-dom'

function App() {
    let tabHead=[
        {
            link:'/page1',
            name:'页面1'
        },
        {
            link:'/page2',
            name:'页面2'
        },
        {
            link:'/page3',
            name:'页面3'
        }
    ]
    let routes=[
        {
            path:'/page1',
            component:Page1
        },
        {
            path:'/page2',
            component:Page2
        },
        {
            path:'/page3',
            component:Page3
        }
    ]
    return (
        <div className="App">
            <Router>
                <div>
                    <ul className="App-tab">
                        {
                            tabHead.map(item=>{
                                return <li className="App-tab-item" key={item.link}>
                                            <Link to={item.link}>{item.name}</Link>
                                        </li>
                            })
                        }
                    </ul>
                </div>
                <Switch>
                    {
                        routes.map(item=>{
                            return <Route path={item.path} component={item.component} key={item.path}></Route>
                        })
                    }
                <Redirect to="/page1" />
                </Switch>
            </Router>
        </div>
    );
}

function Page1(){
    return (
        <div>
          <h1>  页面1的内容</h1>
        </div>
    )
}
function Page2(){
    return (
        <div>
            <h1>页面2的内容</h1>
        </div>
    )
}
function Page3(){
    return (
        <div>
           <h1> 页面3的内容</h1>
        </div>
    )
}


export default App;

Points to note:
1. There are many versions of react-router. Generally, the latest package is installed by default, and there are major revisions above 4.x. It is not recommended to refer to outdated documents. Chinese documents are generally of lower versions. This article uses the 5.x version, the official website: https://reactrouter.com/web/guides/quick-start
2. All are </Route>ultimately under a unique </Router>one. </Route>The matching is affected by the order, and the matching order is from top to bottom, such as

<Router>
      <div>
        <Switch>
          <Route path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
        </Switch>
      </div>
    </Router>

With this match, you can't see the content of the page when you visit /about. Because it matches all /xxx to the /route page. If you /put it last, you can visit. As below

<Router>
      <div>
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
        </Switch>
        <Route path="/">
            <Home />
          </Route>
      </div>
    </Router>

3. The role of exact: If you don't add it, it will match everything, like the above /，/about,/users, write in this order, if you don't /put it at the end, there is another way to strictly match exact, which can achieve the same effect. as follows:

<Router>
      <div>
        <Switch>
          <Route path="/" exact>
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
        </Switch>
      </div>
    </Router>

4. The nesting method of the new version is different from the old version. Above 4.x, you cannot directly </Route>nest </Route>it inside. It is nested in different components, you can refer to the official website, it is very clear.
5. About the role of switch: https://www.jianshu.com/p/d5173d7b411a