react 二级路由

最新推荐文章于 2023-03-28 00:42:23 发布

花儿会跳舞吗

最新推荐文章于 2023-03-28 00:42:23 发布

阅读量630

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_64399627/article/details/126988735

版权

1.主页面

    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Test />} exact></Route>
        {routes.map((i, t) => <Route path={i.path} element={i.element} key={t}
        >
          {(i.Children && i.Children.length) ? (i.Children.map((a, b) => <Route path={a.path} element={a.element} key={b}></Route>)) : null}
        </Route>)}
      </Routes>
    </BrowserRouter>

相当于Route标签里套Route标签，被套的那个是二级的

2.一级路由页面引入<Outlet />,个人感觉类似于vue中<router-view />

import React from 'react';
import { Outlet } from 'react-router-dom';
const Mine = () => {
    return (<>
        <div>mine</div>
        <Outlet />
    </>)
}
export default Mine

注：二级路由参数如下：

//二级路由
const routes2 = [
    {
        path: '/Mine',
        element: <Mine />,
        Children:[
            {
                path: '/Mine/Login',
                element: <Login />
            },
            {
                path: '/Mine/Reg',
                element: <Reg />
            },
        ]
    },
]
export default [...routes,...routes2]