建立一個網站時我們可能由多個頁面，藉由點擊跳轉去完成。在正常情況，我們發送一個initial url到server，server回傳一個root網頁給我們，之後如果需要不同頁面，就發送新的url到server，server再給出回應，如此循環。

我們可以使用React Router Dom，是一種需要額外安裝的工具，當我們發送initial url時，server回傳的是一個bundle，我們只要利用程式碼中的Router，Route，Switch標籤結構，就能渲染出不同網頁，而不用再向server 發送新的url。

首先安裝React router dom ，建議使用5號版本會比較穩定，
npm install react-router-dom@5

寫好要渲染的新網頁組件

const Create = () => {
    return (
      <div className="create">
        <h2>Add a New Blog</h2>
      </div>
    );
  }
   
  export default Create;

利用Router Route Switch結構去選擇現在想看到哪個網頁，可以發現Switch裡面包著兩種內容的Route，其中<Route exact path="/">，代表的是Root 網頁。

return (
    <Router>
      <div className="App">
        <Navbar />
        <div className="content">
          <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <Route path="/create">
              <Create />
            </Route>
          </Switch>
        </div>
      </div>
    </Router>

輸入http://localhost:3000/create 或點擊New blogs都會渲染新的網頁

參考資料

Net ninja