[React] react-router-dom(react-router) 基本路由用法

忘就忘了 只能繼續記..

1. react-router-dom 安裝
2. 路由基本使用
3. <Switch> 用此來選擇正確地點

1. react-router-dom 安裝

移動至 react 專案，在其目錄下安裝

cd my-app
npm react-router-dom
(or yarn add react-router-dom)

2. 路由基本使用

引入 react-router-dom、網頁 元件

import { BrowserRouter, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

把路由語法寫上基本上就能使用

<BrowserRouter>
	<Route path="/about/home">
		<Home />
	</Route>
	<Route path="/about">
		<About />
	</Route>
</BrowserRouter>

如果不知道現在在操作甚麼的話.. 請點此參考...

執行結果如下，但也可以看出問題，所以必須搭配 <Switch>

3. <Switch> 用此來選擇正確地點

引入 <Switch> 元件

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

<Swicth> 寫上去即完成

<BrowserRouter>
  <Switch>
    <Route path="/about/home">
      <Home />
    </Route>
    <Route path="/about">
      <About />
    </Route>
  <Switch />
</BrowserRouter>

完成結果