此篇版本為 react-router-dom v6

react-router-dom 可以設定 react 的網站路由，是以 react-router 為基底，

所以新增後會自動引入 react-router

本篇分為幾個大類

• 路由設定
• 路由跳轉
• 嵌套路由 Nested Routes

在開始之前請先安裝 react-router-dom

安裝 react-router-dom

// npm
npm i react-router-dom

// yarn 
yarn add react-router-dom

依自己喜好去安裝使用 npm 或 yarn

1. 路由設定

BrowserRouter

App.js

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

export default function App() {
  return (
    <BrowserRouter basename="/">
	  // 路由組件
    </BrowserRouter>
  );
}

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

你可以依需求選擇要用 BrowserRouter 或 HashRouter

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

BrowserRouter 可傳入屬性

• basename: string

<BrowserRouter basename="/lala">
   <Link to="/about"/>
   <Link to="/contact"/>
</BrowserRouter>

設定網頁根目錄，上例渲染後會呈現

<a href="/lala/about">
<a href="/lala/contact">

• forceRefresh: boolean

<BrowserRouter forceRefresh={true} />

如為 true 強制刷新頁面

• keyLength: number

<BrowserRouter keyLength={12} />

location key 的長度，預設為 6

Routes、Route 組件

App.js

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Header from "./components/Header";
import Home from "./pages/Home";
import Page1 from "./pages/Page1";
import Page2 from "./pages/Page2";

export default function App() {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="page1" element={<Page1 />} />
        <Route path="page2" element={<Page2 />} />
      </Routes>
    </BrowserRouter>
  );
}

Routes 要包在 Route 的外層，在不同的 url 渲染不同的組件

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

全匹配路由

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="page1" element={<Page1 />} />
  <Route path="page2" element={<Page2 />} />
  <Route path="*" element={<NotFound />} />
</Routes>

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

打開 codesandbox 程式碼範例 看看 App.js 的路由設定吧！

2. 路由跳轉

在跳轉路由時，如果路徑是/開頭的是絕對路由，否則為相對路由，即相對於當前 URL 進行改變

Link 組件

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

<Link to="page1">PAGE1</Link>
<Link to="/page2">PAGE2</Link>

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

NavLink 組件

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

// style
<NavLink
  to="/page1"
  style={({ isActive }) => ({ color: isActive ? "red" : "" })}
>
  PAGE1
</NavLink>

// className
<NavLink
  to="/page2"
  className={({ isActive }) => (isActive ? "red" : "")}
>
  PAGE2
</NavLink>

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

useNavigate

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

const Header = () => {
  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>
  )
}

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

打開 codesandbox 程式碼範例 看看路由跳轉的用法吧！

3. 嵌套路由 Nested Routes

嵌套路由使用方法

• 設定路由在「嵌套組件」的 Route 底下
• 嵌套組件加入 Outlet 顯示頁面內容

3-1. 設定路由在「嵌套組件」的 Route 底下

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Layout />}>
      <Route index element={<Home />} />
      <Route path="page1" element={<Page1 />} />
      <Route path="page2" element={<Page2 />} />
      <Route path="*" element={<NotFound />} />
    </Route>
  </Routes>
</BrowserRouter>

上例嵌套組件為 Layout，被 Layout 包住的 Route 都會被嵌套，

默認路由為 index，當 url 為 “/” 時，會顯示 Home 組件

3-2. 嵌套組件加入 Outlet 顯示頁面內容

Layout.js

import { Outlet } from "react-router-dom";
import Header from "./Header";
import Footer from "./Footer";

const Layout = () => {
  return (
    <div>
      <Header />
      <Outlet />
      <Footer />
    </div>
  );
};

export default Layout;

將嵌套組件加入 Outlet，Outlet 的地方會顯示被嵌套頁面的內容

打開 codesandbox 程式碼範例 看看嵌套路由的用法吧！

結語

由於怕篇幅過長，路由設定教學分為上下兩篇介紹，
明天會繼續示範動態路由與取得當前路由資訊等介紹，
今天就先到這邊囉～我們明天繼續吧！

本文將同步更新至我的部落格
Lala 的前端大補帖