寫在前面

React Router 是 React 官方在維護的路由庫，React Router 是核心庫，根據實際需求又劃分成了 web 瀏覽器版本使用 react-router-dom 的和 native 移動版本使用的 react-router-native 兩種功能擴充套件庫，因此在使用 React Router 時基本都是在根據專案需求使用對應的功能擴充套件庫了，而不是直接使用 React Router 核心庫了。

這裡介紹 React Router 在 web 環境中的擴充套件庫 react-router-dom 的使用方法。

在介紹之前，需要搞清楚路由是什麼東西，前端路由的概念來源於網路中的路由器，用於將網際網路資訊轉發到正確的位置。前端路由就是用於展示對應的頁面資訊，比如點選檢視首頁就要顯示首頁的資訊，點選檢視關於就要顯示關於的資訊。

因此，路由導航連結要一直存在於每一個頁面，才能正確地跳轉。

在早期的多頁面應用時代，實現路由的方式就是在每一個 html 頁面的同一個位置放一個路由導航連結，以確保各個頁面之間可以切換。

後來單頁面應用開始流行起來，單頁面路由的實現方式就是隻有一個 html 頁面，然後通過切換不同的 div 來實現切換不同展示內容的效果。單頁面應用的路由只需有一個，一直切換展示區的內容就可以了。

所以對於單頁面應用的路由要注意幾個點就好上手了：

1. 使用路由的應用頁面被劃分成為兩部分，一部分是常駐的路由導航連結，一部分是跟隨路由導航切換內容的內容展示區。

2. 路由可以巢狀，巢狀的路由就是在內容展示區的某塊中再次劃分成常駐的路由導航連結和更小的內容展示區，此時頁面就同時存在第一層路由和第二層路由。

1. 安裝

yarn add react-router-dom

//or

npm install react-router-dom

2. Router 和 Route

Router 是路由器的意思，負責整個路由的分發動作，是整個路由的總排程員，是活的。而 Route 是路由的意思，是整個路由排程邏輯，是程式設計師寫好的路由邏輯，是死的。在整個應用執行起來後，Router 排程員會根據程式設計師提前寫好的 Route 路由邏輯來進行路由的排程。

在 React 中，Router 也是一個元件，用於包裹要使用路由的頁面元件，這樣就可以在元件內使用路由了。因此 React 中的 元件是使用 react-router 的入口。

接下來就是在頁面元件內部使用路由了，路由的使用分成三部分，1. 路由怎麼設定？ 2. 路由入口（路由導航連結）怎麼設定？ 3. 路由出口（內容展示區）怎麼設定？

React 中沒有單獨的路由表的定義部分，路由表是和內容展示區僅僅聯絡在一起的。

在 React 中，<Route> 標籤負責路由表中路由邏輯的定義，<Link> 負責路由導航連結的設定，<Switch> 標籤負責內容展示區的切換。

function App() {
    return (
        <Router>
            /*頁面其餘部分*/
            <div style={{background: 'red', height: '20px'}}>我是應用標題</div>  

            /*路由導航連結*/
            <nav>
                <Link to="/">首頁</Link>
                <Link to="/about">關於</Link>
                <Link to="/content">內容</Link>
            </nav>    

            /*內容展示部分*/
            <Switch>

                /*路由的設定*/  
                <Route path="/about">
                    <About/>
                </Route>
                <Route path="/content">
                    <Content/>
                </Route>
                <Route path="/">
                    <Home/>
                </Route>

            </Switch>
        </Router>
    );
}