react搭建动态路由

最新推荐文章于 2024-04-23 19:54:30 发布

freeman_x

最新推荐文章于 2024-04-23 19:54:30 发布

阅读量330

点赞数 1

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/freeman_xv1/article/details/136338347

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

router/index.js

import { Navigate } from 'react-router-dom'
import React from 'react'
import File from '../Components/File/File';
import NotFound from '../Components/NotFound/NotFound';
import Flow from '../Components/Flow/Flow';
import Admin from '../Components/Admin/Admin';
import OrgDocument from '../Components/File/OrgDocument'
import MyDocument from '../Components/File/MyDocument'
import Order from '../Components/File/Order';

const GlobalLayout = React.lazy(()=>import('../Components/Global/GlobalLayout'))

export default [
  {
    path: '/',
    element: <GlobalLayout></GlobalLayout>,
    children: [
      {
        path: '/',
        element: <Navigate to='file'/> // 重定向首页
      },
      // 从这开始是动态路由，数据从后台获取
      {
        path: '/file',
        element: <File/>,
        children: [
          {
            path: '/file',
            element: <Navigate to='/file/orgDocument'/>
          },
          {
            path: 'orgDocument',
            element: <OrgDocument/>
          },
          {
            path: 'myDocument/:id',
            element: <MyDocument/>
          },
          {
            path: 'order',
            element: <Order/>
          },
        ]
      },
      {
        path: 'file',
        element: <File/>
      },
      {
        path: 'flow',
        element: <Flow/>
      },
      {
        path: 'admin',
        element: <Admin/>
      },
      // 动态路由到这结束
    ]
  },
  {
    path: '/404',
    element: <NotFound/>
  },
  {
    path: '*',
    element: <Navigate to='/404'/>
  },
]

显示子路由不要忘了 Outlet 组件