当前位置：首页 > React

react动态路由实现

2026-01-27 01:00:43React

动态路由的基本概念

动态路由允许根据参数动态匹配路径，常用于展示不同ID的内容或实现个性化页面。React生态中通常通过react-router-dom库实现。

安装react-router-dom

确保项目已安装react-router-dom（v6及以上版本）：

npm install react-router-dom

配置动态路由

在路由配置中，使用冒号:定义动态参数。例如，匹配用户ID的路由：

react动态路由实现

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user/:userId" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

获取动态参数

在目标组件中，通过useParams钩子获取参数值：

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

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

可选参数与嵌套路由

支持可选参数和嵌套路由结构：

react动态路由实现

<Route path="/post/:postId?" element={<PostPage />} />
<Route path="/dashboard" element={<Dashboard />}>
  <Route path="settings" element={<Settings />} />
</Route>

编程式导航

通过useNavigate实现动态跳转：

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

function Home() {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate('/user/123')}>
      Go to User 123
    </button>
  );
}

动态路由的加载优化

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

const UserProfile = React.lazy(() => import('./UserProfile'));

<Routes>
  <Route 
    path="/user/:userId" 
    element={
      <Suspense fallback={<Loading />}>
        <UserProfile />
      </Suspense>
    } 
  />
</Routes>