如何使用api响应进行嵌套路由

Question

在我们当前的项目中，我的领导想从管理面板控制一切。他们希望从面板中添加/更改布局的内容，我必须发送请求获取布局信息以相应地更改ui。而且路由也会随着这个响应而动态变化。

我有一个类似于下面的api响应。我需要得到反应组件与“组件”和路由与"url“使用它。

[
  {
    "__typename": "Layout",
    "order": 2,
    "title": "{\"en\":\"our services\",\"tr\":\"servislerimiz\"}",
    "is_hidden_from_footer": false,
    "is_hidden_from_header": false,
    "meta_data": null,
    "private_meta_data": null,
    "seo_meta_data": null,
    "category_path": "-",
    "parent_uuid": "-",
    "url": "/our-services",
    "component": "OurServices",
    "children": [
      {
        "__typename": "Layout",
        "order": 3,
        "title": "{\"en\":\"digital transformation\",\"tr\":\"dijital dönüşüm\"}",
        "is_hidden_from_footer": false,
        "is_hidden_from_header": false,
        "meta_data": null,
        "private_meta_data": null,
        "seo_meta_data": null,
        "category_path": "-",
        "parent_uuid": "-",
        "url": "digital-transformation",
        "component": "DigitalTransformation"
      },
      {
        "__typename": "Layout",
        "order": 3,
        "title": "{\"en\":\"Managed IT Services\",\"tr\":\"managed it services\"}",
        "is_hidden_from_footer": false,
        "is_hidden_from_header": false,
        "meta_data": null,
        "private_meta_data": null,
        "seo_meta_data": null,
        "category_path": "-",
        "parent_uuid": "-",
        "url": "managed-it-services",
        "component": "ManagedItServices"
      },
      {
        "__typename": "Layout",
        "order": 3,
        "title": "{\"en\":\"sap consulting\",\"tr\":\"sap consulting\"}",
        "is_hidden_from_footer": false,
        "is_hidden_from_header": false,
        "meta_data": null,
        "private_meta_data": null,
        "seo_meta_data": null,
        "category_path": "-",
        "parent_uuid": "-",
        "url": "sap-consulting",
        "component": "SapConsulting"
      },
      {
        "__typename": "Layout",
        "order": 3,
        "title": "{\"en\":\"Devops\",\"tr\":\"Devops\"}",
        "is_hidden_from_footer": false,
        "is_hidden_from_header": false,
        "meta_data": null,
        "private_meta_data": null,
        "seo_meta_data": null,
        "category_path": "-",
        "parent_uuid": "-",
        "url": "devops",
        "component": "Devops"
      },
      {
        "__typename": "Layout",
        "order": 3,
        "title": "{\"en\":\"application managemenet\",\"tr\":\"application management tr\"}",
        "is_hidden_from_footer": false,
        "is_hidden_from_header": false,
        "meta_data": null,
        "private_meta_data": null,
        "seo_meta_data": null,
        "category_path": "-",
        "parent_uuid": "-",
        "url": "application-management",
        "component": "ApplicationManagement"
      },
      {
        "__typename": "Layout",
        "order": 3,
        "title": "{\"en\":\"QA\",\"tr\":\"QA tr\"}",
        "is_hidden_from_footer": false,
        "is_hidden_from_header": false,
        "meta_data": null,
        "private_meta_data": null,
        "seo_meta_data": null,
        "category_path": "-",
        "parent_uuid": "-",
        "url": "qa-testing-services",
        "component": "QATestingServices"
      }
    ]
  },
  {
    "__typename": "Layout",
    "order": 3,
    "title": "{\"en\":\"insight\",\"tr\":\"insight tr\"}",
    "is_hidden_from_footer": false,
    "is_hidden_from_header": false,
    "meta_data": null,
    "private_meta_data": null,
    "seo_meta_data": null,
    "category_path": "-",
    "parent_uuid": "-",
    "url": "/insight",
    "component": "Insight",
    "children": [
      {
        "__typename": "Layout",
        "order": 3,
        "title": "{\"en\":\"digital transformation\",\"tr\":\"dijital dönüşüm\"}",
        "is_hidden_from_footer": false,
        "is_hidden_from_header": false,
        "meta_data": null,
        "private_meta_data": null,
        "seo_meta_data": null,
        "category_path": "-",
        "parent_uuid": "-",
        "url": "digital-transformation",
        "component": "DigitalTransformation"
      }
    ]
  }
]

我编写了这个呈现方法，但是有警告。

export const RenderRoutes = ({ routes = [] }) => {
  return (
    <Suspense fallback={<div>loading</div>}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Layout headerData={routes} />}>
            {routes.length &&
              routes.map((item, index) => {
                let Comp = lazy(() => import(`../pages/${item.component}`));

                return (
                  <Route
                    key={index}
                    path={item.url}
                    render={() => {
                      return <Comp />;
                    }}
                  >
                    {item.children.map((child, i) => {
                      let ChildComponent = lazy(() =>
                        import(`../pages/${item.component}/${child.component}`)
                      );

                      return (
                        <Route
                          key={index}
                          path={child.url}
                          render={() => {
                            return <ChildComponent />;
                          }}
                        />
                      );
                    })}
                  </Route>
                );
              })}
          </Route>
        </Routes>
      </BrowserRouter>
    </Suspense>
  );
};

​

​

那我该怎么处理呢？谢谢你的帮助。

Answer 1

我觉得你有几个问题

1. In react-router-dom v6 Route组件不再具有component道具或render和children道具函数。它们被一个element道具取代，该道具带有一个ReactElement，即a.k.a。
2. 嵌套的内部(子)路由不正确地使用父路由的index作为它们的反应键。不要使用映射的索引，而是使用url属性，因为这在兄弟路由url BrowserRouter中是唯一的，并且只在ReactTree中呈现一个较高的路由器，以便其他应用程序中的任何链接都能正常工作。

代码：

export const RenderRoutes = ({ routes = [] }) => {
  return (
    <Suspense fallback={<div>loading</div>}>
      <Routes>
        <Route path="/" element={<Layout headerData={routes} />}>
          {routes.map((item) => {
            let Comp = lazy(() => import(`../pages/${item.component}`));

            return (
              <Route key={item.url} path={item.url} element={<Comp />}>
                {item.children.map((child) => {
                  let ChildComponent = lazy(() =>
                    import(`../pages/${item.component}/${child.component}`)
                  );

                  return (
                    <Route
                      key={child.url}
                      path={child.url}
                      element={<ChildComponent />}
                    />
                  );
                })}
              </Route>
            );
          })}
        </Route>
      </Routes>
    </Suspense>
  );
};