用React Router嵌套路由后创建根路由视图

Question

我创建了一个应用程序，它有一个仪表板路径，然后是一些嵌套的路由。我希望我的根仪表板路径显示主仪表板视图，然后嵌套的路由简单地显示他们设置的任何元素。

<Route
path="dashboard"
element={
<PrivateRoute>
<ModalProvider>
<Dashboard />
</ModalProvider>
</PrivateRoute>
}
>
<Route path="settings" element={<Account />} />
<Route path="pets" element={<Pets />} />
<Route path="calendar" element={<Calendar />} />
<Route
path="calculator"
element={
<CalculatorProvider>
<Calculator />
</CalculatorProvider>
}
/>
</Route>

，但似乎我不能只是在Dashboard组件中添加主仪表板视图，因为当然，无论该组件中的内容是为每个嵌套路由显示。如何让路由路径"仪表板"显示自己的组件?

Answer 1

如果我正确理解这个问题，您希望<Dashboard />组件在"/dashboard"上渲染，而其他组件在"/dashboard/settings"上渲染等。渲染索引路由上的<Dashboard />

的例子:

const DashboardLayout = () => (
<PrivateRoute>
<ModalProvider>
<Outlet />
</ModalProvider>
</PrivateRoute>
);

…

<Route path="dashboard" element={<DashboardLayout />}>
<Route index element={<Dashboard />} />          // "/dashboard"
<Route path="settings" element={<Account />} />  // "/dashboard/settings"
<Route path="pets" element={<Pets />} />         // "/dashboard/pets"
<Route path="calendar" element={<Calendar />} /> // "/dashboard/calendar"
<Route
path="calculator"                              // "/dashboard/calculator"
element={
<CalculatorProvider>
<Calculator />
</CalculatorProvider>
}
/>
</Route>