涉及依赖

react-router-dom

src/router/index.tsx

import { IndexRouteObject, NonIndexRouteObject } from 'react-router-dom'

// 重写react-router-dom的RouteObject
export type RouteObject = CustomIndexRouteObject | CustomNonIndexRouteObject

// 添加路由元信息meta, 路由标题，图标等，都可以放在这
interface CustomIndexRouteObject extends IndexRouteObject {
  meta?: Record<string, unknown>
}

// 添加路由元信息meta, 路由标题，图标等，都可以放在这
interface CustomNonIndexRouteObject extends NonIndexRouteObject {
  meta?: Record<string, unknown>
  children?: RouteObject[]
}

const routes: RouteObject[] = [
  {
    path: '/',
    element: <div>首页</div>,
    meta: {
      title: '首页',
    },
  },
  {
    path: 'system',
    element: <div>系统管理</div>,
    meta: {
      title: '系统管理',
    },
  },
]

export default routes

App.tsx

import { BrowserRouter, Link, Outlet, Route, Routes } from 'react-router-dom'
import routes, { RouteObject } from './router'

function App() {
  // 路由对象转标签
  const convert = (route: RouteObject) => {
    if (Array.isArray(route.children)) {
      return (
        <Route key={route.path} path={route.path} element={route.element}>
          {route.children.map((item) => convert(item))}
        </Route>
      )
    } else {
      return (
        <Route key={route.path} path={route.path} element={route.element} />
      )
    }
  }

  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/"
          element={
            <div>
              <Link to={'/'}>首页</Link>
              <Link to={'/system'}>系统管理</Link>
              <Outlet />
            </div>
          }
        >
          {routes.map((route) => convert(route))}
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

export default App

现在在界面应该就能看到首页和系统管理的文本链接，点击后能显示对应的内容，浏览器并无跳转。后期会联合Antd Menu的属性对路由对象进行改进。