全栈的自我修养 ———— react router6默认二级路由配置?嵌套时候如何实现默认导航

在组件嵌套时候小编定义了一个共同组件于/public地址下,小编发现如果直接访问public是只有外部组件的页面,小编目标是访问public时候直接访问index页面,小编找了很多资料最终自己使出来了一个办法如下!!

小编自己发现的

即把
      {
        path: '/public/index',
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <LazyIndex></LazyIndex>
          </Suspense>
        )
      },
    换成
      {
        path: '',
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <LazyIndex></LazyIndex>
          </Suspense>
        )
      },
      即可实现访问/public直接去我的path为空的地址!!
const router = createBrowserRouter([
  {
    path: '/',
    element: <Navigate to="/public/index" replace />,
    errorElement: <div>errorPage</div>,
  },
  {
    path: '/public',
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <LazyBaseComponents>
        </LazyBaseComponents>
      </Suspense>
    ),
    children: [
      {
        path: '',
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <LazyIndex></LazyIndex>
          </Suspense>
        )
      },
      {
        path: '/public/login',
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <LazyLogin></LazyLogin>
          </Suspense>
        )
      },
    ]
  }
]);

export default router;

后来查找到的

直接不写path,写一个index为true
      {
        index: true,
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <LazyIndex></LazyIndex>
          </Suspense>
        )
      },
  • 6
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值