安裝react-router
Single Page Application,中文又稱單頁式應用程式( SPA)
1 | npm install --save react-router-dom@6.4.1 |
React Router 起手式
- HashRouter用於 Web 瀏覽器,因為某些原因不應(或不能)將 URL 發送到服務器。
- 引入 import { HashRouter } from "react-router-dom"
- HashRouter 是一個元件概念,接著只需要使用它將整個 < App /> 包起來即可
1 | import * as React from "react"; |
以上成功引入了 React Router
React Router 基本使用
使用 Route
- path:定義路徑
- element:定義對應的元件
1 | <Route path="/todolist" element={ <ToDoList/> }> |
< Route > 只能包在 < Routes > 底下使用,因此正確來講必須這樣寫才對
1 | import React from 'react' |
重新 npm run dev
打開http://localhost:3000/#/todolist
巢狀路由
路徑位置App.jsx
- 載入import { Link } from "react-router-dom"
- Link to="/"
1 | import { Outlet, Link } from 'react-router-dom'; |
路徑內容main.jsx
以下App Route 包裹 ToDoList元件
< Route path=”/“ element={
<Route path=”todolist” element={
< /Route>
以下Admin Route 包裹 AdminProducts元件
< Route path=”/admin” element={
<Route path=”products” element={
< /Route>
1 | import React from 'react' |
Admin =>載入
1 | import { Outlet, Link } from 'react-router-dom'; |
NavLink 切換頁面的方式
檔案App.jsx,將 Link 通通改成 NavLink
<NavLink to=”/“ className={({ isActive }) =>
[
‘border p-3 hover:bg-indigo-600 duration-500’,
isActive ? ‘router-link-active’ : null
].join(‘ ‘)
}>Home
1 | import { Outlet, Link ,NavLink} from 'react-router-dom'; |
檔案index.css新增以下
1 | .router-link-active { |
React Router - Hook
//載入
import { useEffect } from “react”;
常用的 React Router Hook
- useLocation: 載入
- useParams: 載入
- useNavigate: 載入
- useRoutes: 載入
useLocation
在App.jsx內舉例
1 | //載入 |
useParams 動態參數
1 | import { useEffect } from "react"; |
useNavigate 重新導向
1 | import { useEffect } from "react"; |
Lazy Loading:可以將我們的程式碼分割成不同的 chunk,然後在你需要或請求的時候才去載入相對應檔案
將以上改寫,新增routes資料夾index.jsx
- 載入lazy
- 載入useRoutes
- 頁面載入與lazy寫法
1 | //載入lazy |
在views /Product.jsx內
載入useParams
const { id } = useParams();
1 | import { useEffect } from "react"; |

接下來找到「All images」的下拉選單,裡面會有一個「New Album」
成功建立了一個 Album!



獲得













