react router官方

透過npm包安裝

// --save可以裝進pack.json dependencies中，下次加載時可以直接npm i,不用再重新安裝
npm install react-router-dom --save

<Router />

https://stackoverflow.com/questions/51974369/what-is-the-difference-between-hashrouter-and-browserrouter-in-react

• Router需要繼承在 HashRouter或BrowserRouter 才可以使用
• HashRouter - 默認路由 http://192.168.2.27:3000/#/ (有#/)，csr(資料在前端渲染)
• BrowserRouter - 沒有顯示#但需要伺服器配合，ssr(資料在後端渲染)

最外層的容器包在要使用的react最外層

import { BrowserRouter as Router} from 'react-router-dom'

<Switch />

通常用來包覆Route，只會渲染第一個匹配的路由

<Router>
	<Switch>
	  <Route exact path="/" component={Home}></Route>
	  <Route exact path="/test" component={Test}></Route>
	  <Route exact path="*">404</Route>
	</Switch>
</Router>

<Route /> 配置路由

• exact - 為true時，路徑需與location.pathname完全相同才匹配
• path - 路徑
• component - 路徑對應顯示的組件

<Router>
	<Route expact path="/" component={Home}></Route>
</Router>

將route path的路由，統一用一個檔案管理 (之後有使用到的路由統一由該檔案輸出)

// constants/routes.js
export const HOME_PAGE = '/'
export const US_SERVICE = '/service'

// APP.jsx (React-router)
import * as routes from './constants/routes'

<Router>
	<Route exact path={routes.HOME_PAGE} components={Home} />
	<Route exact path={routes.US_SERVICE} components={Service} />
</Router>