- Objective: 共享布局
- Breadcrumb:
# 概念阐释
## 语义
react中的嵌套路由是为了让子集页面的内容显示在父级页面中。这样做的最大好处是在父级组件中设置**共享**的布局或导航结构，而子级路由则负责填充具体的内容。这种方法避免了在每个子级页面中重复相同的布局代码。
## 语法
```js
// 父级路由组件
function App() {
return (
<Route path="users" element={<Users />}>
<Route path=":userId" element={<UserDetail />} />
</Route>
); }
// Users页面占位符
import { Link, Outlet } from 'react-router-dom';
function Users() {
return (
<div>
<h1>Users</h1>
{/* 其他用户列表相关内容 */}
<Outlet /> {/* 占位符，用于渲染子路由 */}
</div> );
}
```
- 嵌套的父级要写成`<Route path="" element={}>...</Route>`
- User 页面占位符`Outlet`
# 实例
```js
//App.js 在类别页面展示 Category 页面内容，路径为动态路由
<Route path="categories" element={<Categories />} >
<Route path=":name" element={<Category />} />
</Route>
```
```js
// Categories.js 在Categories页面中设置占位符
import { Link, Outlet } from 'react-router-dom';
export default function Categories () {
const categories = useSelector(selectCategories)
return (
<main>
<h1>Categories</h1>
<ul>
// categories目录，concepts/javascript/html
</ul>
<Outlet/>
</main>
)
}
```
# 相关内容
# 参考资料
- [outlet-React Router](https://beta.reactrouter.com/en/main/components/outlet)
- 本地文件夹：react_router_v6_lession_starting_code
- App.js
- Categories.js