繼前面提到 HOC 的概念後，緊接著介紹也是相當實用的 react router

本文使用的版本
會因版本不同 有些微差異

"react-router-dom": "^5.2.0",

react router 是什麼

用來達成在 react 中 client-side routing 的 framework

什麼是 client-side routing

在同網址上靠使用者觸發事件 進而渲染頁面上的不同元素 (切換 component 的顯示及隱藏)
改變 url，達成讓使用者 "感覺" 上有在移動的效果

什麼是 server-side routing

傳統的 anchor tag 導向到其他頁面，稱為伺服器端路由

<a href="..." target="..">...</a>

使用 react router 之前

要使用 react router 前，要先安裝 react router

npm i react-router-dom

在 index.js 中 import

import { BrowserRouter } from 'react-router-dom';

然後將 App component 用 BrowserRouter component 包住

在 App.js 中 import react-router-dom 會用到的東西

import {
    BrowserRouter as Router , 
    Switch , 
    Route , 
    Link
} from 'react-router-dom';

將整個 return 的jsx用 <Router> <Router />包起來

export default class App extends React.Component{
    render(){
        ...
        return(
            <Router>
                <div className='app'>
                ...
                </div>
            </Router>
        )
    }
}

基本的路由

在 return 中加入 <ul> <li> 跟 <Link>
基本上 Link 跟 a(ancher) tag 類似
Link component 要給他 to="url_name" ，也就是 url 的值

這裡拿上個案例中的 ClickerCounter 跟 HoverCounter 當例子

return (
    <Router>
        <div className='app'>
            <h1>App component</h1>
            <ul>
                <li>
                    <Link to="/" >home</Link>
                </li>
                <li>
                    <Link to="/clicker_counter" >ClickerCounter</Link>
                </li>
                <li>
                    <Link to="/hover_counter" >HoverCounter</Link>
                </li>
            </ul>
        </div>
    </Router>
)

然後 新增 Switch 跟 Route，新增一個首頁要顯示內容的 component
(這裏取名為 Main component)

return (
    <Router>
        <div className='app'>
            ...
            <Switch>
                <Route path="/" component={Main} />
                <Route path="/clicker_counter" component={ClickerCounter}/>
                <Route path="/hover_counter" component={HoverCounter} />
            </Switch>
        </div>        
    </Router>    
)

應該會看到 url 有變化，但畫面顯示的全是 Main component

Switch 的作用是 渲染出第一個符合 location 的 <Route> 或 <Redirect>

path="/" 符合 path="/clicker_counter" 跟 path="/hover_counter"
簡單來說，越下層的 component 要放越上面，讓 Switch 先匹配 render
調整一下順序為

<Switch>
    <Route path="/clicker_counter" component={ClickerCounter}/>
    <Route path="/hover_counter" component={HoverCounter} />
    <Route path="/" component={Main} />
</Switch>

這時候就會是理想中的狀態

exact

調整順序好麻煩 這時候就輪到 exact 出馬
exact 要 url 完全符合時才算匹配成功
順序上就沒有關係，會建議將所有 Route 都加上

最後的結果就是這樣

<Switch>
    <Route exact path="/clicker_counter" component={ClickerCounter}/>
    <Route exact path="/hover_counter" component={HoverCounter} />
    <Route exact path="/" component={Main} />
</Switch>