Lala Code

Lala 的前端大補帖,歡迎一起鑽研前端技術😊

0%

【DAY 23】React-router-dom 路由設定教學,實現頁面跳轉(上)

cover

此篇版本為 react-router-dom v6

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

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

本篇分為幾個大類

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

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



安裝 react-router-dom

1
2
3
4
5
// npm
npm i react-router-dom

// yarn
yarn add react-router-dom

依自己喜好去安裝使用 npmyarn



1. 路由設定

BrowserRouter

App.js

1
2
3
4
5
6
7
8
9
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
    1
    2
    3
    4
    <BrowserRouter basename="/lala">
    <Link to="/about"/>
    <Link to="/contact"/>
    </BrowserRouter>
    設定網頁根目錄,上例渲染後會呈現
    1
    2
    <a href="/lala/about">
    <a href="/lala/contact">

  • forceRefresh: boolean

    1
    <BrowserRouter forceRefresh={true} />

    如為 true 強制刷新頁面


  • keyLength: number

    1
    <BrowserRouter keyLength={12} />

    location key 的長度,預設為 6




Routes、Route 組件

App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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:要渲染的组件

全匹配路由

1
2
3
4
5
6
<Routes>
<Route path="/" element={<Home />} />
<Route path="page1" element={<Page1 />} />
<Route path="page2" element={<Page2 />} />
<Route path="*" element={<NotFound />} />
</Routes>

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




2. 路由跳轉

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

1
2
3
4
import { Link } from "react-router-dom";

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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

1
2
3
4
5
6
7
8
9
10
11
12
13
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 為回上一層




3. 嵌套路由 Nested Routes

嵌套路由使用方法

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

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

1
2
3
4
5
6
7
8
9
10
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 的地方會顯示被嵌套頁面的內容




結語

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


本文為 IT 鐵人賽系列文 你 React 了嗎? 30 天解鎖 React 技能




🚀實體工作坊分享

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

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



🚀線上課程分享

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

Hahow

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



六角學院

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


Udemy

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