v6路由控制机制踩坑记录
React Router v6相比v5在路由控制机制上做了重大调整，特别是<Routes>组件的使用方式和路由匹配逻辑都发生了根本性变化。
核心问题：路由匹配逻辑变更
在v5中，我们习惯这样写：
<Route path="/user/:id" component={UserComponent} />
但在v6中，必须使用<Routes>包裹所有路由组件，并且路径匹配规则更严格。如果直接使用<Route>而不在外层包裹<Routes>，会遇到以下错误：
"You must render a
<Routes>component inside of a<Router>component"
实际踩坑过程
- 错误写法（v5风格）：
function App() {
return (
<div>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</div>
);
}
- 正确写法：
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
- 嵌套路由控制：
<Routes>
<Route path="/user" element={<UserLayout/>}>
<Route index element={<UserList />} />
<Route path=":id" element={<UserProfile />} />
</Route>
</Routes>
路由守卫实现
v6中<Navigate>组件取代了v5的<Redirect>，路由控制更灵活：
<Route path="/admin" element={
<RequireAuth>
<Admin />
</RequireAuth>
} />
关键点：所有路由组件必须在<Routes>内渲染，否则会报错。升级时一定要检查所有路由配置是否符合v6规范。
讨论