Javascript 映射在 reactrouterdom 的 Routes 组件中不起作用

发布于08月17日

我只想将我的路由呈现为数组，而不是手动输入所有内容.

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)

但是，如果我这样说，它是有效的:

&lt；路由路径="/"元素={}/&gt；

update- non-auth layout piucture

我想，我犯了个愚蠢的错误.有人能在这里纠正我吗？

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

不要再发明轮子了.react-router-dom导出一个有效地完成此操作的useRoutes钩子.

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

export const routes = [ { element: <非授权布局 />, children: [ { path: "/", element: <Home />, }, { path: "/about", element: <About />, }, ], }, ];

非授权布局

非授权布局 is now a layout route and needs to render an Outlet instead of a children prop.

import { Outlet } from 'react-router-dom'; const 非授权布局 = () => ( <Box> <div> <TopBar /> </div> <Box> <Outlet /> </Box> </Box> );

APP

import { BrowserRouter, useRoutes } from 'react-router-dom'; import { routes } from '../path/to/routes'; ... const element = useRoutes(routes); ... <BrowserRouter> {element} </BrowserRouter>

Edit mapping-doesnt-work-inside-react-router-doms-routes-component (forked)

Javascript 映射在 reactrouterdom 的 Routes 组件中不起作用

推荐答案

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

Javascript相关问答推荐

为什么JavaScript双边字符串文字插值不是二次的？

是什么原因导致此Angular 16应用程序中类型错误时属性结果不存在？

materialized - activeIndex返回-1

过滤对象数组并动态将属性放入新数组

node TS：JWT令牌签名以验证客户端和后台问题之间的身份验证

我可以使用CSS有效地实现最大宽度=100%和最大高度=100%，而无需父母有明确的/固定的宽度和高度，替代方法吗？

类型自定义lazy Promise. all

如何在Connect 4游戏中 for each 玩家使用位板寻找7形状？

InDesign—创建一个独立的窗口，在文档中进行更正时保持打开状态

为什么ngModel不能在最后一个版本的Angular 17上工作？'

如何在Javascript中使用Go和检索本地托管Apache Arrow Flight服务器？

手机上的渲染错误文本必须在文本组件中渲染，但在浏览器上没有问题<><>

v—自动完成不显示 Select 列表中的所有项目

无法访问Vue 3深度监视器中对象数组的特定对象值'

无法读取未定义错误的属性路径名''

JS—删除对象数组中对象的子对象

将内容大小设置为剩余可用空间，但如果需要，可在div上显示滚动条

NG/Express API路由处理程序停止工作

使用Document.Evaluate() Select 一个包含撇号的HTML元素

当从其他文件创建类实例时，为什么工作线程不工作？