iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Modern Web

用React刻自己的投資Dashboard系列 第 16

用React刻自己的投資Dashboard Day16 - react-router-dom讓SPA也有路由

tags: 2021鐵人賽 React

前一篇提到的導覽列的各個按鈕,點擊之後會跳到不同的頁面,每個頁面都會是不同的路徑,這個功能可以使用react-router-dom來實做,本篇就來介紹一下react-router-dom怎麼使用吧。

react-router-dom基本用法

直接來看一下官方範例,主要會用到四個component,包含BrowserRouter/Switch/Route/Link。

  • BrowserRouter:包在SPA元件的外層,使用HTML5 history API讓UI與URL同步。
  • Switch:讓第一個符合URL的元件被渲染,如果沒有Switch,則所有符合URL的元件都會被渲染。
  • Route:定義元件相對應的path,當元件的path符合所在的URL時就會被渲染。
  • Link:功能類似HTML的a標籤,點擊後會跳轉至該Link的to所指定的path。
import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

上面的程式碼在codeSandbox呈現如連結,可以試著玩玩看,會發現點擊按鈕的時候,瀏覽器的網址及下方渲染的內容會同時改變。

URL Parameters

了解react-router-dom的基本用法後,可以來看看react是如何讀取url parameters。

官方的codeSandbox如連結。下面來說明幾個關鍵的設定。

  • import useRarams
    import {
      BrowserRouter as Router,
      Switch,
      Route,
      Link,
      useParams
    } from "react-router-dom";
    
  • 設定要讀取的params,在Switch的Route中,path使用/:id,children則是指定使用另外一個元件Child渲染。
    export default function ParamsExample() {
      return (
        <Router>
          <div>
            <h2>Accounts</h2>
    
            <ul>
              <li>
                <Link to="/netflix">Netflix</Link>
              </li>
              <li>
                <Link to="/zillow-group">Zillow Group</Link>
              </li>
              <li>
                <Link to="/yahoo">Yahoo</Link>
              </li>
              <li>
                <Link to="/modus-create">Modus Create</Link>
              </li>
            </ul>
    
            <Switch>
              <Route path="/:id" children={<Child />} />
            </Switch>
          </div>
        </Router>
      );
    }
    
  • 使用useParams讀取URL Parameters並渲染
function Child() {
  // We can use the `useParams` hook here to access
  // the dynamic pieces of the URL.
  let { id } = useParams();

  return (
    <div>
      <h3>ID: {id}</h3>
    </div>
  );
}
  • 點擊不同按鈕可以發現ID: 後面的字會跟著網址URL參數而改變,如下圖,netflix是小寫,因為讀取的URL參數也是小寫。

小結

react-router-dom的功能真的很多,官方的學習資源也非常完整,算是非常容易上手的一個package。下一篇就來應用react-router-dom的功能在投資Dashboard 2.0吧。


上一篇
用React刻自己的投資Dashboard Day15 - 投資Dashboard 2.0版 Wireframe
下一篇
用React刻自己的投資Dashboard Day17 - Dashboard 2.0版路由功能
系列文
用React刻自己的投資Dashboard30

尚未有邦友留言

立即登入留言