3.React嵌套路由及默认二级路由

一本正经胡说八道熊

于 2022-05-27 01:27:45 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： # React-Router 文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/csdnlmx/article/details/124996087

React-Router 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了React中如何实现嵌套路由，并详细讲解了如何设置默认二级路由。通过定义嵌套路由声明和在一级路由组件中使用二级路由出口，实现了路由的嵌套。此外，针对默认显示二级路由的需求，提出了添加`index`属性并移除其`path`的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

嵌套路由

代码实现
1.定义嵌套路由声明

//代码示例
<Route path='/' element={<Layout />}>
//此时声明Board与Article为Layout 的嵌套路由
  <Route path='Board' element={<Board />}></Route>
  <Route path='Article' element={<Article />}></Route>
</Route>

2.去一级路由组件处使用指定二级路由出口

//以步骤一Layout 组件为例
import { Outlet } from "react-router-dom"

function Layout() {
    return (
        <div>
            Layout
            <Outlet/>
        </div>

    )
}

默认二级路由设置

场景：有时候想需要默认显示二级路由，这时候需要默认二级路由设置

方法：添加index属性，再把他自己的path干掉

//步骤一代码为例
<Route index element={<Board />}></Route>