传入 createBrowserRouter 的对象称为路由对象，通过设置路由对象的属性来实现多种类型的路由
设置 path 和 element 属性定义基本的路由对象
1
2
3
4
5
6
| export const router = createBrowserRouter([
{
path: "/",
element: <App/>
}
])
|
嵌套路由
设置 children 属性定义路由对象的子路由
子路由的 path 属性以 / 开头，会被视为绝对路径，因此不需要添加 /
1
2
3
4
5
6
7
8
| {
path: "/dashboard",
element: <Dashboard/>,
children: [
{ path: "home", element: <Home/> },
{ path: "settings", element: <Settings/> }
]
}
|
在父路由中使用 <Outlet> 作为子路由容器
1
2
3
4
5
6
7
8
9
10
11
| import { Outlet } from "react-router";
export default function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
<Outlet />
</div>
)
}
|
布局路由
对于仅作为布局容器的组件，如公共导航栏等，它们不应该占用 URL 片段，此时可以将该组件定义为布局路由，不设置 path 属性
1
2
3
4
5
6
7
8
9
10
11
12
13
| {
path: "/dashboard",
element: <Dashboard/>,
children: [
{
element: <MarketingLayout/>,
children: [
{ path: "home", element: <Home/> },
{ path: "contact", element: <Contact/> }
]
}
]
}
|
索引路由
索引路由匹配到父路由的路径，作为父路由的默认子路由
索引路由设置 index 属性为 true，且不设置 path 属性
1
2
3
4
5
6
7
8
9
10
11
12
13
| {
path: "/dashboard",
element: <Dashboard/>,
children: [
{
element: <MarketingLayout/>,
children: [
{ index: true, element: <Home/> },
{ path: "contact", element: <Contact/> }
]
}
]
}
|
前缀路由
为子路由指定一个 URL 前缀
1
2
3
4
5
6
7
8
9
10
11
12
| {
path: "/dashboard",
children: [
{
element: <MarketingLayout/>,
children: [
{ index: true, element: <Home/> },
{ path: "contact", element: <Contact/> }
]
}
]
}
|
通配符路由
在 URL 结尾可以使用 * 通配符，可以匹配到任意长度的任意字符
1
2
3
4
| {
path: "/files/*",
element: <Files/>
}
|
可选路由
在 URL 片段后加上 ?，表示该片段是可选的
1
2
3
4
| {
path: "/files/content?",
element: <Files/>
}
|
错误页面
设置 errorElement 属性来指定错误页面，当导航过程或页面加载发生错误时，会自动跳转到错误页面
1
2
3
4
5
| {
path: "/home",
element: <Home/>,
errorElement: <ErrorPage/>
}
|
