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