React 第三十八节 Router 中useRoutes 的使用详解及注意事项

news2025/5/12 15:12:57

前言

useRoutes 是 React Router v6 引入的一个钩子函数，允许通过 JavaScript 对象（而非传统的 JSX 语法）定义路由配置。这种方式更适合复杂路由结构，且代码更简洁易维护。

一、基础使用

1.1、useRoutes路由配置对象

useRoutes 接收一个路由配置数组，每个路由对象包含以下属性：

path: 路由路径（支持动态参数，如 /users/:id）
element: 对应的 React 组件
children: 嵌套子路由
index: 标记默认子路由（类似 <Navigate to="default-child" />）

const routes = [
  { path: "/", element: <Home /> },
  { path: "/about", element: <About /> },
  {
    path: "/users",
    element: <UsersLayout />,
    children: [
      { index: true, element: <UserList /> }, // 默认子路由
      { path: ":userId", element: <UserProfile /> },
    ],
  },
  { path: "*", element: <NotFound /> }, // 404 页面
];

1.2、在组件中使用 useRoutes

将定义好的路由配置传入 useRoutes，并在组件中渲染它：

import { useRoutes } from 'react-router-dom';

function App() {
  const element = useRoutes(routes);
  return element;
}

二、完整代码案例

2.1、页面组件定义

// Home.jsx
export default function Home() {
  return <h1>Home Page</h1>;
}

// About.jsx
export default function About() {
  return <h1>About Us</h1>;
}

// UsersLayout.jsx
import { Outlet } from 'react-router-dom';
export default function UsersLayout() {
  return (
    <div>
      <h2>Users</h2>
      <Outlet /> {/* 子路由渲染位置 */}
    </div>
  );
}

// UserList.jsx
import { Link } from 'react-router-dom';
export default function UserList() {
  return (
    <div>
      <Link to="1">User 1</Link>
      <Link to="2">User 2</Link>
    </div>
  );
}

// UserProfile.jsx
import { useParams } from 'react-router-dom';
export default function UserProfile() {
  const { userId } = useParams();
  return <h3>User ID: {userId}</h3>;
}

// NotFound.jsx
export default function NotFound() {
  return <h1>404 - Page Not Found</h1>;
}

2.2、useRoutes路由配置与 App 组件

import { useRoutes } from 'react-router-dom';
import Home from './Home';
import About from './About';
import UsersLayout from './UsersLayout';
import UserList from './UserList';
import UserProfile from './UserProfile';
import NotFound from './NotFound';

const routes = [
  { path: '/', element: <Home /> },
  { path: '/about', element: <About /> },
  {
    path: '/users',
    element: <UsersLayout />,
    children: [
      { index: true, element: <UserList /> },
      { path: ':userId', element: <UserProfile /> },
    ],
  },
  { path: '*', element: <NotFound /> },
];

function App() {
  const element = useRoutes(routes);
  return element;
}

export default App;

2.3、入口文件（启用路由useRoutes）

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

三、关键点说明

3.1、`useRoutes`动态路由参数

使用 :paramName 定义动态路径（如 /users/:userId）。
在组件中通过 useParams() 获取参数值。
useParam是使用详解

3.2、useRoutes嵌套路由

父路由通过指定子路由的渲染位置。
子路由路径会自动继承父路径（如 /users/1 匹配父路径 /users 的子路由 :userId）。

3.3、导航

使用 <Link to="path"> 进行页面跳转，而非 <a> 标签。
示例：在 UserList 组件中跳转到用户详情页。

四、扩展场景

4.1、useRoutes 懒加载组件

结合 React.lazy 和 Suspense 实现按需加载：

const Home = React.lazy(() => import('./Home'));
const routes = [
  { 
    path: '/', 
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <Home />
      </Suspense>
    ) 
  },
];

4.2、useRoutes 路由守卫

在路由配置的 element 中加入权限校验逻辑：

const PrivateRoute = ({ children }) => {
  const isAuthenticated = checkAuth();
  return isAuthenticated ? children : <Navigate to="/login" />;
};

const routes = [
  { 
    path: '/dashboard', 
    element: <PrivateRoute><Dashboard /></PrivateRoute> 
  },
];