前言

今天要講router，算是開發中很重要的一環，設計良好的路由，對於使用者的體驗是很加分的，但這邊不會聊到深，只會講基本的環境搭建，跟用法

下載

npm install --save react-router-dom

這邊你可能會問，奇怪不是router嗎？怎麼多出了一個react-router-dom?其實是這樣的react-router-dom跟react-router是一樣東西，只是多了： BrowserRouter、 HashRouter、Link、NavLink

正式開始

下載好以後回到App.js資料夾，輸入下方程式碼，

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

function App() {
  return (
    <Router>
      <Link to="/">xxx</Link> //主要Link設置
      <Link to="/xxx">xxx</Link>
    <Switch>
        <Route path="/" exact component={xxx}></Route> // Link連結Component
        <Route path="/xxx" exact component={xxx}></Route>
    </Switch>
    </Router>
  );
}

export default App;

這邊來說一下怎麼運作的

首先你需先用BrowserRouter把所有router配置包起來，然後這邊有三個需要注意的switch, route, link
switch 這是切換路由時的判斷，就好像switch...case的感覺
route 這是路由基本資訊，會以這個為基準，裡面顯示什麼component搭配什麼path
link 這是切換的方法，按下這個link會去找對應的component

Github 這邊我在github有寫一個簡單的router，不懂的話可以去看看