React Router v5 → v6 是很常見的 React 生態系面試題。
這題和 CSR / SSR / SEO 不是同一個主題。它主要在看你是否熟悉 React Router 的 API 變化，以及你有沒有做過依賴升級或路由重構。
v5 到 v6 最大差異
最核心的幾個變化：
Switch改成Routescomponent/render改成elementuseHistory改成useNavigateRedirect改成Navigate- nested routes 改用
Outlet - v6 會自動 route ranking，不需要到處加
exact
Switch 改成 Routes
v5：
import { Switch, Route } from "react-router-dom";
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>v6：
import { Routes, Route } from "react-router-dom";
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>差異重點：
Switch改為Routescomponent={Home}改成element={<Home />}renderprop 不再使用exact大多不需要了
useHistory 改成 useNavigate
v5：
const history = useHistory();
history.push("/dashboard");
history.replace("/login");v6：
const navigate = useNavigate();
navigate("/dashboard");
navigate("/login", { replace: true });返回上一頁：
navigate(-1);面試回答可以補：
v6 把 imperative navigation 收斂到
useNavigate，不再直接暴露 history object 給一般使用情境。
Redirect 改成 Navigate
v5：
<Redirect to="/login" />v6：
<Navigate to="/login" replace />常見用在 private route：
function RequireAuth({ children }: { children: React.ReactNode }) {
const isLogin = useAuth();
if (!isLogin) {
return <Navigate to="/login" replace />;
}
return children;
}Nested Routes 和 Outlet
v6 更鼓勵用 nested routes 表達版面結構。
<Routes>
<Route path="/dashboard" element={<DashboardLayout />}>
<Route index element={<Overview />} />
<Route path="settings" element={<Settings />} />
</Route>
</Routes>DashboardLayout 裡放 Outlet：
import { Outlet } from "react-router-dom";
function DashboardLayout() {
return (
<main>
<Sidebar />
<Outlet />
</main>
);
}Outlet 就是子路由渲染的位置。
v6 route matching 有什麼不同？
v5 很常需要 exact，避免 / 吃到所有路由。
v6 會做 route ranking，會自動選最符合的 route。
例如：
<Routes>
<Route path="/users/new" element={<NewUser />} />
<Route path="/users/:id" element={<UserDetail />} />
</Routes>即使 dynamic route 存在，/users/new 也會優先匹配到更具體的 route。
升級時常見踩坑
1. Route 裡不能直接放 component prop
// v6 不再這樣寫
<Route path="/about" component={About} />要改成：
<Route path="/about" element={<About />} />2. Nested route path 不要亂加斜線
<Route path="/dashboard" element={<DashboardLayout />}>
<Route path="settings" element={<Settings />} />
</Route>子路由通常寫相對路徑 settings，不是 /settings。
3. PrivateRoute 寫法要調整
v5 常用包裝 Route 的方式，v6 比較常用 element composition：
<Route
path="/dashboard"
element={
<RequireAuth>
<Dashboard />
</RequireAuth>
}
/>面試常見追問
React Router 和 Next.js route 差在哪？
React Router 通常用在 CSR React App，由前端管理 route。
Next.js 是 file-based routing，route 同時和 server rendering、static generation、metadata、layout 等能力綁在一起。
v6 為什麼要改 element？
element={<Page />} 更符合 React composition，也讓 route 可以直接傳 JSX，例如包 provider、layout、guard。
升級時你會怎麼做？
我會先找出所有 route 設定、private route、redirect、history usage，再逐步替換 API，最後補測主要路由流程和權限導頁。
面試回答模板
React Router v5 到 v6 的重點是
Switch改成Routes，component/render改成element，useHistory改成useNavigate，Redirect改成Navigate，nested routes 則用Outlet。v6 也有更好的 route ranking，所以大多不需要exact。升級時我會特別檢查 private route、redirect、history push/replace，以及 nested route path 的相對路徑寫法。