如何在 React Router 6 中使用带有 useRoutes 的索引路由

Posted 2023-02-21

【中文标题】如何在 React Router 6 中使用带有 useRoutes 的索引路由

【英文标题】：how to use an index route with useRoutes in React Router 6

【发布时间】：2022-01-21 09:21:47

【问题描述】：

<Route path="/exercises" element=<Layout />>
  <Route index element=<List /> />
  <Route path=":id" element=<Exercise /> />
</Route>

如何将其重写为 useRoutes() 的 JS 对象，包括索引路由？

    path: "/exercises",
    element: <Layout />,
    children : [
      index? , element: <List />,
      path: ":id", element: <Exercise /> 
 ] 

我不确定如何处理索引...

【参考方案1】：

useRoutes 钩子接受 RouteObject objects 的数组

/**
 * A route object represents a logical route, with (optionally) its child
 * routes organized in a tree-like structure.
 */
export interface RouteObject 
  caseSensitive?: boolean;
  children?: RouteObject[];
  element?: React.ReactNode;
  index?: boolean;
  path?: string;

您应该能够使用index 属性指定什么是索引路由。

  path: "/exercises",
  element: <Layout />,
  children: [
     index: true, element: <List /> ,
     path: ":id", element: <Exercise /> 
  ],

【参考方案2】：

这似乎有效：

    path: "/exercises",
    element: <Layout />,
    children : [
      path: "" , element: <List />,
      path: ":id", element: <Exercise /> 
 ] 

当路径为 /exercises 时，Layout 会在 Outlet 中渲染，List 会在 Layout 中渲染。当路径为 /exercises/4 时（例如），Exercise 组件在 Layout 中的 Outlet 中呈现。