React Router v6 教學

React Router v6 是 React 應用程式中最流行的前端路由解決方案。它提供動態路由、巢狀路由與程式導向導航，使開發者能夠輕鬆管理單頁應用程式 (SPA) 的路由。

要開始使用 React Router v6，首先需要安裝它。你可以使用以下指令：

npm install react-router-dom

這將安裝 React Router 及其核心功能，接下來我們來看看如何設定基本的路由。

在 React 應用程式中，我們使用 <BrowserRouter> 包裹主應用，然後使用 <Routes> 和 <Route> 定義不同的路由。例如：

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
export default App;

React Router 提供 <Link> 元件來實現頁面導航，而不會觸發完整的頁面重新載入：

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

function Navbar() {
return (
<nav>
<Link to="/">首頁</Link>
<Link to="/about">關於我們</Link>
</nav>
);
}
export default Navbar;

我們可以使用 : 來定義動態路由，例如 /:id，然後透過 useParams 來獲取 URL 參數：

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

function BlogPost() {
const { id } = useParams();
return <h1>這是文章 {id}</h1>;
}

React Router v6 支援巢狀路由，使我們可以在某個路由內再嵌套子路由。例如：

<Route path="dashboard" element={<Dashboard />}>
<Route path="profile" element={<Profile />} />
<Route path="settings" element={<Settings />} />
</Route>

有時我們需要在函式內透過程式碼進行導航，這時可以使用 useNavigate：

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

function Login() {
const navigate = useNavigate();

function handleLogin() {
// 模擬登入成功後跳轉
navigate("/dashboard");
}

return <button onClick={handleLogin}>登入</button>;
}
export default Login;

為了處理找不到的頁面，我們可以使用萬用 (*) 路由：

<Route path="*" element={<NotFound />} />