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吧。