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

前言

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> },
];

我们可以用更清晰的 JavaScript 对象管理路由，灵活处理动态参数、嵌套布局和复杂逻辑。