v6路由配置文件

v6路由配置文件

React Router v6相较于v5在路由配置上有了重大变化，本文将详细介绍v6路由配置文件的编写方法。

核心变化

v6移除了Switch组件，改用Routes，并且路由匹配采用严格匹配模式。同时，Router组件被拆分为BrowserRouter、HashRouter等具体实现。

基础配置示例

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/:id" element={<User />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

嵌套路由配置

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

路由参数处理

使用useParams()钩子获取动态参数：

function User() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

可复现步骤

1. 安装依赖：npm install react-router-dom@latest
2. 替换原有Router组件为BrowserRouter
3. 将Switch替换为Routes
4. 更新路由定义语法
5. 测试所有路由功能