react-router 实现简单的tab页面切换

先上图：

标题：通过路由来实现简单的tab切换

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;

注意点：
1.react-router有很多个版本，一般会默认安装最新的包，并且4.x以上有很大的改版，不建议参考过期的文档，中文文档一般都是低版本的。本文用的是5.x版本，官网：https://reactrouter.com/web/guides/quick-start
2.所有的</Route>最终都在一个唯一的</Router>下面。</Route>的匹对受顺序的影响，匹对顺序是从上往下，比如

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

这样匹配，访问/about是看不到页面内容的。因为它把所有的/xxx都匹配到了/路由页面去了。如果把/放到最后，则可以访问。如下面

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

3.exact的作用：不加就会匹配所有，像上面 /，/about,/users,这样的顺序写，如果不把/放到最后匹配，还有一种方法是exact严格匹配，能达到同样的效果。如下：

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

4.新版本和旧版本的嵌套方式不一样，4.x以上不能直接将</Route>嵌套在</Route>里面。是在不同组件里面嵌套，可以参考官网，写的很清楚。
5.关于switch的作用：https://www.jianshu.com/p/d5173d7b411a