react-router V6 怎么动态路由啊

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› React

这是一个创建于 806 天前的主题，其中的信息可能已经有所发展或是发生改变。

= =react-route 究竟怎么处理动态路由啊，都给我整麻了，框架是 https://github.com/HalseySpicy/Hooks-Admin 这个，但是研究了好久的动态路由都不行

动态路

框架

react-route

react-router

5 条回复 • 2022-10-14 16:31:55 +08:00

byronzhu

2022-10-14 14:34:58 +08:00

useRoutes 可实现动态路由

byronzhu

2022-10-14 14:42:04 +08:00

```javascript
App.tsx
import React from "react";
import { BrowserRouter } from "react-router-dom";
import YYRouter from "./router";

function App() {
return (
<BrowserRouter>
<YYRouter />
</BrowserRouter>
);
}

export default React.memo(App);
router/index.tsx
import { useRoutes, Navigate } from "react-router-dom";
import { ItemType } from "antd/lib/menu/hooks/useItems";
import LayoutPage from "@/components/Layout";
import { observer } from "mobx-react-lite";
import { fetchAsyncRoute } from "./async";
import LoginPage from "@/pages/Login";
import NotFound from "@/pages/NotFound";
import { useLocation } from "react-router";
import { useApp } from "@/stores";

function YYRouter() {
const app = useApp();
const routes = fetchAsyncRoute(app.user);
const location = useLocation();
const items: ItemType[] = [];

if (app.loading) {
return useRoutes([
{
path: "/",
element: <></>,
children: [{ path: location.pathname, element: <></> }],
},
]);
}

routes.push({
path: "*",
element: <NotFound />,
});

for (let route of routes) {
if (route.item) {
items.push(route.item);
}
}

return useRoutes([
{
path: "/",
element: app.user ? (
<LayoutPage items={items} />
) : (
<Navigate to="/login" replace />
),
children: routes,
},
{
path: "/login",
element: app.user ? <Navigate to="/" replace /> : <LoginPage />,
},
]);
}

export default observer(YYRouter);
router/async.tsx
import { RouteObject } from "react-router-dom";
import { ItemType } from "antd/lib/menu/hooks/useItems";

import HomeRoute from "./modules/home";
import BannerRoute from "./modules/banner";
import RobotRoute from "./modules/robot";
import GivingRoute from "./modules/giving";
import PermissionRoute from "./modules/permission";
import UserRoute from "./modules/user";
import FinanceRoute from "./modules/finance";
import ApplyRoute from "./modules/apply";
import TimeLineRoute from "./modules/timeline";

interface ItemT extends RouteObject {
item?: ItemType;
}
export function fetchAsyncRoute(user?: Api.Admin): ItemT[] {
let routes: ItemT[] = [];

if (!user) return routes;

routes = routes.concat(HomeRoute);

if (user.role === "admin") {
routes = routes.concat(PermissionRoute);
}

if (user.role === "finance" || user.role === "customer_service") {
routes = routes.concat(UserRoute);
routes = routes.concat(FinanceRoute);
} else {
routes = routes.concat(BannerRoute);
routes = routes.concat(RobotRoute);
routes = routes.concat(GivingRoute);
routes = routes.concat(UserRoute);
routes = routes.concat(FinanceRoute);
routes = routes.concat(ApplyRoute);
routes = routes.concat(TimeLineRoute);
}

return routes;
}

```
这是我的后台动态路由实现方式，modules 里是一级路由的定义

zzzzzzzzyp

2022-10-14 15:30:03 +08:00

{ path: '/index', component: '/pages/index' },
{ path: '/index/:id', component: '/pages/index' }

karott7

2022-10-14 16:09:36 +08:00

推荐一下我写的约定式路由插件 https://www.npmjs.com/package/vite-plugin-react-views ，根据文档结构自动生成 routes ，op 的项目路由还是要手动配置，直接引入插件改一下就好了

lblblong

2022-10-14 16:31:55 +08:00

推荐一下我封装的路由库： https://oh-router.netlify.app/zh