Router(路由)，是用以規畫網站路徑用，React Router是根據URL 中使用的Route（/對於主頁、/about關於頁面等）有條件地呈現頁面組件加以顯示。

如何使用 React Router：

1.首先使用 NPM 安裝：

react-router-dom 安裝頁面

npm install --save react-router-dom

2.在index.js頁面中導入 BrowserRouter模組，並加入<BrowserRouter>標籤

import { BrowserRouter } from “react-router-dom”
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>, 
    document.getElementById('root')
);

3.在App.js頁面中導入Route 和 Switch 模組,接下來在App 組件中，添加<Switch>和<Route>標籤,在<Route>標籤內添加path屬性和要加載的組件名稱component屬性。
在主頁的path前面添加exact，告訴應用程序它是第一頁，它會加載第一個匹配路由的URL。

<Route exact path="/" component = {Home} />

4.如果有子頁面，例如在contact的頁面下還有child子頁面，這時必需在contact的path前面加上exact，才不會導致找不到畫面

 <Route  exact path="/contact" component = {Contact} />

5.必需編寫一個Error組件，如果用戶輸入了錯誤的 URL，它就會加載Error組件， 不要忘記將其導入應用程序。

最後程式如下：

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import Error from './Error';

const App = () => {
  const Child =()=>{
    return <h1>This is Child Page!</h1>;
  }
  return (
    <div>    
       <Switch>
         <Route exact path="/" component = {Home} />
         <Route  path="/about" component = {About} />
         <Route  exact path="/contact" component = {Contact} />
         <Route  path="/contact/child" component = {Child} />
         <Route  component = {Error} />
       </Switch>  
    </div>
  )
}
export default App