Reactjs React路由器未渲染

我试图理解嵌套的路由器结构。我已经从一个教程中实现了一些代码，但它并没有像预期的那样工作。这是我的routes.js文件

import React from "react";
import {
BrowserRouter as Router,
Switch
} from "react-router-dom";

const ROUTES = [
{ path: "/", key: "ROOT", exact: true, component: () => <h1>Log in</h1> },
{
    path: "/app",
    key: "APP",
    component: RenderRoutes,
    routes: [
        {
            path: "/app",
            key: "APP_ROOT",
            exact: true,
            component: () => <h1>App Index</h1>,
        },
        {
            path: "/app/page",
            key: "APP_PAGE",
            exact: true,
            component: () => <h1>App Page</h1>,
            },
        ],
    },
];

export default ROUTES;

function RouteWithSubRoutes(route) {
return (
    <Router
        path={route.path}
        exact={route.exact}
        render={props => <route.component {...props} routes={route.routes} />}
    />
);
}



export function RenderRoutes(routes ) {
return (
    <Switch>
        {routes.map((route, i) => {
            return <RouteWithSubRoutes key={route.key} {...route} />;
        })}
        <Router component={() => <h1>Not Found!</h1>} />
    </Switch>
    );
}

从“React”导入React；
进口{
BrowserRouter作为路由器，
转换
}从“反应路由器dom”；
常数路由=[
{路径：“/”，键：“根”，精确：true，组件：（）=>登录}，
{
路径：“/app”，
键：“应用程序”，
组件：RenderOutes，
路线：[
{
路径：“/app”，
键：“应用程序根”，
确切地说：是的，
组件：（）=>应用程序索引，
},
{
路径：“/app/page”，
键：“应用程序页面”，
确切地说：是的，
组件：（）=>应用程序页面，
},
],
},
];
导出默认路径；
功能路由和子路由（路由）{
返回(
}
/>
);
}
导出函数渲染器（路由）{
返回(
{routes.map（（route，i）=>{
返回；
})}
找不到！}/>
);
}

我已经进口了

浏览器路由器

像往常一样在index.js中。在我的应用程序组件中，我尝试渲染渲染路径（路由）：

function App() {
  return (
    <div style={{ display: "flex", height: "100vh", alignItems: "stretch" }}>
      <div style={{ flex: 0.3, backgroundColor: "#f2f2f2" }}>route menu</div>
      <div>
        {/* <RenderRoutes routes={ROUTES} />  This way also is not working*/}
        {RenderRoutes(ROUTES)}
      </div>
    </div>
  );
}

函数应用程序（）{
返回(
路线菜单
{/*这种方式也不起作用*/}
{RenderRoutes（ROUTES）}
);
}

---

在这里，我试图呈现子组件，但页面除了app.js中的（根菜单）文本外，没有显示任何内容。让我知道我做错了什么。提前感谢

react路由器结构通常遵循1交换机1路由器和多条路由

 <Router>
    <Switch>
      <Route exact path="/">
        <HomePage />
      </Route>
      <Route path="/YOUR_PATH">
        <BlogPost />
      </Route>
    </Switch>
  </Router>,

,

您将返回RouteWith中的多个路由器，子例程将其更改为Route

function RouteWithSubRoutes(route) {
return (
    <Route
        path={route.path}
        exact={route.exact}
        render={props => <route.component {...props} routes={route.routes} />}
    />
);
}

功能路由和子路由（路由）{
返回(
}
/>
);
}

你可以切换到

看看它是否有效，而不是使用

渲染（路线）

吗？我试过了，但没有效果。你太棒了。成功了。最后一个错误的字母“r”改变了一切，我很高兴能帮上忙。如果它回答了你的问题，请投票并接受答案。快乐编码