此篇版本為 react-router-dom 6.3.0
react-router-dom 可以設定 react 的網站路由，是以 react-router 為基底，所以新增後會自動引入 react-router
在【IT 鐵人賽】你React了嗎? 30天解鎖React技能裡有做更完整的介紹，可直接看這邊
【DAY 23】React-router-dom 路由設定教學，實現頁面跳轉(上)
【DAY 24】React-router-dom 路由設定教學，實現頁面跳轉(下)

安裝 react-router-dom

1	npm i react-router-dom

路由設定

在 index.js 設定整個網站的路由

BrowserRouter

BrowserRouter 包在所有組件外層，確保整個網站可以使用 router

import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const root = ReactDOM.createRoot(
  document.getElementById("root")
);

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

BrowserRouter 跟 HashRouter 的差別
HashRouter：網址會帶 # 字號，純前端使用，換 url 時不會發送request
BrowserRouter：網址沒有 # 字號較美觀，需有後端設定，換 url 時會發送request

Routers、Router 組件

在不同的 url 渲染不同的組件

import ReactDOM from "react-dom/client";
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
import App from "./App";
import Page1 from "./routes/Page1";
import Page2 from "./routes/Page2";

const root = ReactDOM.createRoot(
  document.getElementById("root")
);

root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="page1" element={<Page1 />} />
      <Route path="page2" element={<Page2 />} />
    </Routes>
  </BrowserRouter>
);

path：路徑
element：要渲染的组件

全匹配路由

設定 Route path="*" 在所有路由的最下方，當上面的路徑都沒有匹配到時，就會顯示此組件，可用於 404 找不到頁面

<Routes>
  <Route path="/foo" element={Foo}>
    <Route path="bar" element={Bar}></Route>
    <Route path="*" element={NotFound}></Route>
  </Route>
</Routes>

路由跳轉

Link 組件

指定連結路徑，跳轉頁面 url

1
2
3

import { Link } from "react-router-dom";

<Link to="index">index</Link>;

NavLink 組件

NavLink 跟 Link 用法相同，差別只在於 NavLink 可以判斷 to 的 url 是否為當前路徑，可用於設定 active 的樣式

import { NavLink } from "react-router-dom";

function Foo() {
return (
   <NavLink style={({ isActive }) => ({ color: isActive? "red": "" })}>style</NavLink>
   <NavLink className={({ isActive }) => isActive ? "red" : "blue"}>className</NavLink>
  );
}

useNavigate

可直接傳入要跳轉的 url，可傳入相對路徑，-1 為回上一層

import { useNavigate } from 'react-router-dom';

function Foo(){
  const navigate= useNavigate();
  return (
    // 前路徑 /a；    當前路徑 /a/a1
    <div onClick={() => navigate('/b')}>跳轉到/b</div>
    <div onClick={() => navigate('a11')}>跳轉到/a/a1/a11</div>
    <div onClick={() => navigate('../a2')}>跳轉到/a/a2</div>
    <div onClick={() => navigate(-1)}>跳轉到/a</div>
  )
}

嵌套路由 Nested Routes

如要用 App 當作基底的 layout 有兩個步驟

設定路由在 App 的 Router 底下
加入 Outlay，Outlay 會顯示需變更切換的組件

設定路由

<BrowserRouter>
  <Routes>
    <Route path="/" element={<App />}>
      <Route path="page1" element={<Page1 />} />
      <Route path="page2" element={<Page2 />} />
    </Route>
  </Routes>
</BrowserRouter>

並在 App.js ( layout 組件) 的地方加入 Outlet

import { Outlet, Link } from "react-router-dom";

export default function App() {
  return (
    <div>
      <nav>
        <Link to="/page1">Page1</Link> |{" "}
        <Link to="/page2">Page2</Link>
      </nav>
      <Outlet/>
    </div>
  );
}

默認路由 index Routes

如為嵌套路由時，可設定預設要顯示的組件，當 url 為 ‘/about’ 時，Outlet 會顯示 Default 組件

<Routes>
  <Route path="/about" element={About}>
    <Route index element={Default}></Route>
    <Route path="contact" element={Contact}></Route>
  </Route>
</Routes>

Params參數

useParams()

當 router 是動態路由時，useParams 可以取得 url 的 params

<BrowserRouter>
  <Routes>
    <Route path="/product/:id" element={<Product/>} />
  </Routes>
</BrowserRouter>;

import { useParams } from "react-router-dom";
export default function Foo() {
  const params= useParams();
  return (
    <div>
      <h1>{params.id}</h1>
    </div>
 );
}

useSearchParams()

可查找或設定 Query String 問號後面的 params，用法跟 useState() 一樣

如當前路徑為 /product?id=12

import { useSearchParams } from "react-router-dom";

function Product() {
  const [searchParams, setSearchParams] = useSearchParams();

  console.log(searchParams.get("id")); // 12
  console.log(searchParams.getAll("id")); // [12]

  setSearchParams({
    name: "foo",
  }); // /product?name=foo

  return <div>foo</div>;
}

當前路由資訊

useLocation

獲取當前 url 的各種屬性，

1
2
3

import { useLocation } from "react-router-dom";
let location = useLocation();
console.log(location);

你可以得到以下資訊

{
  pathname: "/hello/world",
  search: "?filter=123",
  hash: "#menu",
  state: null,
  key: "12345"
}

pathname：URL 路徑

search：Query String Params

hash：用於確定頁面滾動的具體位置

state：對於 window.history.state 的包裝

key：每個 Location 對象擁有一個唯一的 key，可以實現數據緩存

參考文獻：react-router-dom使用指南（最新V6.0.1）、router-tutorial

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。

Lala Code

React-router-dom路由設定教學，實現頁面跳轉！