前幾天介紹了資料管理用的 context 以及 Redux，今天要來介紹一下要如何不透過伺服器切換頁面，直接在 React 中切換。

React router 是什麼

React router 是一個供 React 跳轉頁面的套件，通常會運用在 SPA (Single Page Application) 的模式下(也就是前後端分離的方式)，由於不是伺服器去渲染頁面，沒有伺服器的路由跳轉，因此在 React 路由跳轉成了個大問題。還好，透過 React router 可以幫助我們不透過後端就能夠跳轉頁面，在前端寫路由。
React router 固然解決了 react 路由的問題，但 React router 本身不能操作 DOM ，不太好用，因此需要奠基於 React router之上的 react-router-dom 來幫助我們做路由。

安裝

我們主要使用react-router-dom，因此安裝它即可：

npm install react-router-dom

基本設定

接著，我們要做點基本設定，讓我們能夠使用。
首先，需要使用BrowserRouter 或著 HashRouter來包住 App 。
這兩個路由介面有甚麼差呢？簡單來說，BrowserRouter的網址是http://example.com/index，在切換 url 時會發送 request ，因此需要搭配後端的 server 或著其他工具；而 HashRouter 的網址會是這樣：http://example.com/#/index，在網址上會有一個井字。HashRouter 不會發送 Request，在井字後面的部分純粹只給瀏覽器判斷用。
這一系列不會講到後端的部分，因此這邊會使用HashRouter，也方便之後部屬網站到 github page。

將 App 用HashRouter包住：

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <div>
        <HashRouter>
            <App/>
        </HashRouter>
    </div>
)

接著就可以設定 route 了。

設定 route

要建立 route ，首先要先將要作為 route 的元件傳入 <Route/> 的 element props 中，並將 <Route/> 放入<Routes>...</Routes>中。
Route的設定方式是這樣的，在path中放入這個元件要使用的路徑，在element中放入元件：

const Page1 = () => {
    return (
        <div>
            <h2>第一頁</h2>
        </div>
    )
}
// ...

<Route path="/" element={<Page1/>}/>

接著需要將這個設定好的<Route/>放入<Routes>中：

const App = () =>{
    return (
        <Routes>
            <Route path="/" element={<Page1/>}/>
        </Routes>
    )
}

Routes 可以讓我們在切換路由時，能夠找的到正確的路由路徑切換，因此所有的路由都會放在<Routes>中。

如果要做第二個路由也是一樣：

const Page2 = ()=>{
    return (
        <div>
            <h2>第二頁</h2>
        </div>
    )
}

const App = () =>{
    return (
        <Routes>
            <Route path="/" element={<Page1/>}/>
            <Route path="/second" element={<Page2/>}/>
        </Routes>
    )
}

這樣就能夠切換第一頁、第二頁了！

巢狀 route

除了一般的路由，也可以設定巢狀路由，也就是在路由下的子路由。例如，今天我想要在 page 1 下再設定兩個子分頁，可以直接使用 Route 標籤包住：

const App = () =>{
    return (
        <Routes>
            <Route path="/" element={<Page1/>}/>
            <Route path="/second" element={<Page2/>}>
                <Route path="/sub" element={<Sub1/>}/>
            </Route>
        </Routes>
    )
}

子分頁的網址會是父路由的 path 再加上子分頁的 path，如 sub1 就會是http://example.com/#/second/sub。

Link

除了設定 route ，我們也需要在網頁內部設定連結，才能轉向其他的網址。原本在寫 HTML 的時候，都是使用<a>標籤轉向，但是在 React-router 中，會需要改用<Link>標籤，才能讓 react-router 知道使用者是要在內部轉址。
使用方法很簡單，只要將<a>標籤轉換成<Link>標籤，並將href屬性轉換成to即可：

// Page1

<Link to="/second">page 2</Link>

這樣就可以成功轉址到 page 2 了。

以上就是 react-router 的基本用法，透過上面的東西可以在不需要伺服器的情況下做到基本的切換分頁，方便實作 SPA，相當好用！