React 中的路由跳轉及傳參
一、安裝與基礎配置
-
1. 安裝 React Router v6
npm install react-router-dom -
2. 配置路由
import { BrowserRouter, Routes, Route } from 'react-router-dom'; function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/user/:id" element={<User />} /> <Route path="/search" element={<SearchPage />} /> </Routes> </BrowserRouter> ); }
二、路由跳轉方式
1. 使用 <Link> 組件跳轉
import { Link } from 'react-router-dom';
function Home() {
return (
<div>
<Link to="/user/123">跳轉到用戶123</Link>
<Link to="/search?>搜索John</Link>
</div>
);
}2. 編程式導航：useNavigate
- 1. 參數傳遞規範：
-
• navigate(to, options)
-
•
to參數：僅接受路徑相關屬性（pathname,search,hash） -
•
options參數：控制導航行爲（state,replace等）
options常用的配置選項：
-
•
replace：是否替換當前頁面的歷史記錄； -
•
state：傳遞的狀態數據； -
•
shoudlNavigate：是否允許進行路由跳轉；
import { useNavigate } from 'react-router-dom';
function Home() {
const navigate = useNavigate();
return (
<button onClick={() => navigate('/user/456')}>
跳轉到用戶456
</button>
);
}三、參數傳遞方式
1. URL 參數（動態路由）
-
• 傳遞參數：
<Link to="/user/789">用戶789</Link> // 或 navigate('/user/789'); -
• 獲取參數：
import { useParams } from 'react-router-dom'; function User() { const { id } = useParams(); // id = "789" return <div>用戶ID: {id}</div>; }
2. 查詢參數（Query Parameters）
-
• 傳遞參數：
<Link to="/search?>搜索</Link> // 或 navigate('/search?name=john&age=25'); -
• 獲取參數：
import { useSearchParams } from 'react-router-dom'; function SearchPage() { const [searchParams] = useSearchParams(); const name = searchParams.get('name'); // "john" const age = searchParams.get('age'); // "25" return <div>搜索條件：{name}, {age}</div>; }
3. 狀態參數（State）
-
• 傳遞參數：
<Link to="/details" state={{ from: 'home', data: { id: 1 } }}>詳情</Link> // 或 navigate('/details', { state: { from: 'home', data: { id: 1 } } }); -
• 獲取參數：
import { useLocation } from 'react-router-dom'; function Details() { const location = useLocation(); const { from, data } = location.state || {}; return <div>來自：{from}, 數據ID：{data?.id}</div>; }
四、關鍵注意事項
-
1. 動態路由參數需在路由配置中定義（如
path="/user/:id"）。 -
2. 查詢參數不會在路由配置中顯式聲明，通過
?key=value傳遞。 -
3. State 參數不會暴露在 URL 中，適合敏感數據，但頁面刷新後會丟失。
-
4. 處理未定義參數：使用可選鏈操作符（
?.）或默認值避免錯誤。const { id } = useParams() || {}; const name = searchParams.get('name') || '未知'; const stateData = location.state?.data || {};
五、完整示例
// App.js
import { BrowserRouter, Routes, Route } from'react-router-dom';
importHomefrom'./Home';
importUserfrom'./User';
importSearchPagefrom'./SearchPage';
importDetailsfrom'./Details';
functionApp() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/user/:id" element={<User />} />
<Route path="/search" element={<SearchPage />} />
<Route path="/details" element={<Details />} />
</Routes>
</BrowserRouter>
);
}
// Home.js
import { Link, useNavigate } from'react-router-dom';
functionHome() {
const navigate = useNavigate();
return (
<div>
<Link to="/user/123">用戶123（URL參數）</Link>
<button onClick={() => navigate('/search?name=john')}>
搜索John（查詢參數）
</button>
<button onClick={() => navigate('/details', { state: { data: '祕密信息' } })}>
查看詳情（State參數）
</button>
</div>
);
}
// User.js
import { useParams } from'react-router-dom';
functionUser() {
const { id } = useParams();
return<div>用戶ID: {id}</div>;
}
// SearchPage.js
import { useSearchParams } from'react-router-dom';
functionSearchPage() {
const [searchParams] = useSearchParams();
const name = searchParams.get('name');
return<div>搜索名稱: {name}</div>;
}
// Details.js
import { useLocation } from'react-router-dom';
functionDetails() {
const location = useLocation();
const data = location.state?.data;
return<div>接收到的State數據: {data}</div>;
}六、總結
-
• URL 參數：適合必要標識（如資源 ID）。
-
• 查詢參數：適合可選過濾條件（如搜索、分頁）。
-
• State 參數：適合敏感或臨時數據（如表單提交後的狀態）。
-
• 編程式導航：
useNavigate提供靈活跳轉（如提交後跳轉）。 -
• 安全性：避免在 URL 中傳遞敏感信息（如密碼）。
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/sMfV49Cgy6gMu1oL2QRsqw