react实现动态路由
动态路由的概念
动态路由允许在运行时根据数据或用户输入生成路由路径，常用于需要灵活处理不同参数的场景，如用户详情页、商品展示页等。React 中通常通过 React Router 库实现。
安装 React Router
确保项目已安装 React Router 的 v6 版本：
npm install react-router-dom基本动态路由配置
在路由配置中使用 :param 语法定义动态参数：
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/users/:userId" element={<UserDetail />} />
</Routes>
</BrowserRouter>
);
}获取动态参数
在目标组件中使用 useParams 钩子获取路由参数：
import { useParams } from 'react-router-dom';
function UserDetail() {
const { userId } = useParams();
return <div>User ID: {userId}</div>;
}嵌套动态路由
支持多级动态路径嵌套：
<Route path="/products/:category/:productId" element={<ProductPage />} />编程式导航
通过 useNavigate 实现动态跳转：
import { useNavigate } from 'react-router-dom';
function Home() {
const navigate = useNavigate();
const handleClick = () => navigate('/users/123');
return <button onClick={handleClick}>Go to User 123</button>;
}动态路由加载数据
结合 useEffect 在路由变化时获取数据：
function UserDetail() {
const { userId } = useParams();
const [user, setUser] = useState(null);
useEffect(() => {
fetch(`/api/users/${userId}`).then(res => setUser(res.data));
}, [userId]);
return user ? <div>{user.name}</div> : <div>Loading...</div>;
}路由匹配优化
使用 * 匹配未定义的路由：
<Route path="*" element={<NotFoundPage />} />动态路由权限控制
通过高阶组件或自定义钩子实现权限校验：
function PrivateRoute({ children }) {
const isAuth = useAuth();
return isAuth ? children : <Navigate to="/login" />;
}
// 使用方式
<Route path="/admin" element={<PrivateRoute><AdminPage /></PrivateRoute>} />动态生成路由表
根据后端返回的配置生成路由：
const dynamicRoutes = [
{ path: '/shop/:id', component: ShopPage },
{ path: '/blog/:slug', component: BlogPost }
];
function App() {
return (
<Routes>
{dynamicRoutes.map((route) => (
<Route key={route.path} path={route.path} element={<route.component />} />
))}
</Routes>
);
}
