iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Software Development

30天學會React系列 第 7

Day7 React-router

前言

今天要講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,不懂的話可以去看看


上一篇
Day6 Class vs Function
下一篇
Redux流程 + 如何調用 redux 的 state
系列文
30天學會React8

尚未有邦友留言

立即登入留言