映射在 react-router-dom 的 Routes 组件中不起作用

Question

而不是手动输入所有内容，我只想将我的路线呈现为一个数组。

export const routes = [
  {
    path: "/",
    component: Home,
    layout: NonAuthLayout,
  },
  {
    path: "/about",
    component: About,
    layout: NonAuthLayout,
  },
];

在我的 app.js 文件中，我做了这样的事情：

<BrowserRouter>
        <Routes>
          {routes.map((route, index) => {
            const Component = route.component;
            const Layout = route.layout || Fragment;
            return (
              <Route
                key={index}
                path={route.path}
                element={
                  <Layout>
                    <Component />
                  </Layout>
                }
              />
            );
          })}
        </Routes>
      </BrowserRouter>

但是它给出了错误，而我试图执行它。

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    at Routes (http://localhost:3000/static/js/bundle.js:57985:5)
    at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:12771:70)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:12462:5)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:12791:5)
    at Router (http://localhost:3000/static/js/bundle.js:57918:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:56727:5)
    at App
    at SettingProvider (http://localhost:3000/static/js/bundle.js:174:5)

但是，如果我这样说它可以工作：

<Route path="/" element={} />

更新-非授权布局图片

我想，我犯了一些愚蠢的错误。 有人可以在这里纠正我吗？

Answer 1

我相信您正在尝试使用此解决方案中的动态组件名称来呈现组件：

React / JSX 动态组件名称

它不起作用，因为当您执行const Component = route.component您只是得到字符串（例如“Home”或“About”）

您的变量需要保存对组件本身的引用，而不仅仅是作为字符串的组件名称

因此，将您的组件存储在一个数组中，并使用从route.component返回的动态变量名称从中呈现

类似于以下内容：

import HomeComponent from './components/home'
import AboutComponent from './components/about'

const components = {
  home: HomeComponent,
  about: AboutComponent
}

const Component = components[route.component];

在不查看更多代码的情况下提供正确的解决方案需要做一些工作，但这个概念（和你的错误）是非常基础的，所以你最好参考我上面链接的帖子和官方的 React 文档更好地理解这一点：

https://reactjs.org/docs/jsx-in-depth.html#choosing-the-type-at-runtime

Answer 2

我没有看到您的代码有任何明显的问题，实际上它似乎运行没有问题。

我怀疑您的Home 、 About和NonAuthLayout组件中的一个或多个可能存在组件导出/导入问题，因此请仔细检查这些。

但是，有一个更简单的方法

不要重新发明轮子。 react-router-dom导出了一个useRoutes钩子，可以有效地做到这一点。

重新配置您的路由配置以符合 RRD 语法：

export const routes = [
  {
    element: <NonAuthLayout />,
    children: [
      {
        path: "/",
        element: <Home />,
      },
      {
        path: "/about",
        element: <About />,
      },
    ],
  },
];

NonAuthLayout

NonAuthLayout现在是一个布局路由，需要渲染一个Outlet而不是children道具。

import { Outlet } from 'react-router-dom';

const NonAuthLayout = () => (
  <Box>
    <div>
     <TopBar />
    </div>
    <Box>
      <Outlet />
    </Box>
  </Box>
);

应用程序

import { BrowserRouter, useRoutes } from 'react-router-dom';
import { routes } from '../path/to/routes';

...

const element = useRoutes(routes);

...

<BrowserRouter>
  {element}
</BrowserRouter>