react-routerは簡単なタブページ切り替えを実装します

上の最初の画像：

タイトル：ルーティングによる単純なタブ切り替え

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以降のメジャーリビジョンがあります。古いドキュメントを参照することはお勧めしません。中国語のドキュメントは一般的に下位バージョン。この記事では、公式Webサイトである5.xバージョンを使用しています。https：//reactrouter.com/web/guides/quick-start2
。すべてが</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を/ routeページに一致させるためです。あなたがいる場合/、それは最後に入れて、あなたが訪問することができます。以下のように

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

3.正確な役割：追加しない場合は、上記のようにすべてに一致します。/，/about,/usersこの順序で記述します。/最後に配置しない場合は、正確に一致する別の方法があります。同じ効果を達成することができます。次のように：

<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>。さまざまなコンポーネントにネストされており、公式Webサイトを参照できます。非常に明確です。
5.スイッチの役割について：https：//www.jianshu.com/p/d5173d7b411a