03a1-路由嵌套和Outlet

Huxzhi小于 1 分钟react18react-router-v6

03a1-路由嵌套 和 Outlet

<Routes>
   <Route path={"hello"} element={<Hello/>}/>
</Routes>

Outlet 用来表示嵌套路由中的组件

Outlet 组件用来在父级路由中挂载子路由

当嵌套路由中的路径匹配成功了,可以匹配多个子路由。Outlet 则表示嵌套路由中的组件 当嵌套路由中的路径没有匹配成功,Outlet 就什么都不是

<Route path='/students' element={<StudentList/>}>
    <Route path=':id' element={<Student/>}/>
    <Route path={"hello"} element={<Hello/>} />
</Route>

上例中,Route 嵌套后,如果访问/students则会挂载 StudentList 组件,如果访问/students/:id则会自动在 StudentList 组件中对 Student 组件进行挂载。在 StudentList 组件中就可以使用 Outlet 来引用这些被挂载的组件。

const StudentList = () => {
    return <div>
        学生列表
        <Outlet/>
    </div>
};