v6路由配置优化

React Router v6的发布带来了路由系统的重大重构，其中最显著的变化是<Routes>组件替代了v5中的<Route>嵌套结构。本文将详细介绍v6路由配置的优化实践。

核心变化

v6中移除了<Switch>组件，改为使用<Routes>来包裹所有路由。这使得路由匹配逻辑更加直观和可预测。

配置优化步骤

基础路由配置

import { BrowserRouter, Routes, Route } from 'react-router-dom';

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

嵌套路由处理 v6中使用element属性替代component，并且通过Outlet组件实现嵌套路由。

// 父路由组件
function User() {
  return (
    <div>
      <h1>用户页面</h1>
      <Outlet />
    </div>
  );
}

// 子路由配置
<Routes>
  <Route path="/user" element={<User />}>
    <Route index element={<UserProfile />} />
    <Route path="settings" element={<UserSettings />} />
  </Route>
</Routes>

参数获取优化 v6中使用useParams()和useSearchParams()替代v5中的match.params和location.search。

function UserProfile() {
  const { userId } = useParams();
  const [searchParams] = useSearchParams();
  const tab = searchParams.get('tab');
  
  return (
    <div>
      用户ID: {userId}, 当前标签: {tab}
    </div>
  );
}