React通过编程实现来自数组的路由

Question

我有一个名为routes.js的文件，在那里我导入组件并创建一个routes数组。

路由.js

import Country from '../src/components/country/Country';
import Countries from '../src/components/country/CountriesList';
import User from '../src/components/user/User';
import UsersList from '../src/components/user/UsersList';
export const routes = [
{
name: 'USER',
children: [
{
name: 'Create',
path: '/user-create',
component: User,
// isHidden: true,
},
{
name: 'Update',
path: '/update-user',
isHidden: true,
component: User,
},
{
name: 'View',
path: '/users',
component: UsersList,
// isHidden: true,
},
],
},
{
name: 'COUNTRY',
children: [
{
name: 'Create',
path: '/country',
component: Country,
},
{
name: 'View',
path: '/countries',
component: Countries,
},
],
},


],
},

];

然后，我想导入路由数组并以编程方式渲染路由。我做到了。

{routes.map(
{children}=>
children.forEach({component,path} => <Route component={component} exact path={path}/>)

)}

这会导致语法错误我想这是因为我正在尝试使用ForEach循环进行渲染。如何解决此语法问题？

Answer 1

您可以使用Array#flatMap和Array#map函数，该函数将返回React可以渲染的组件数组。

{routes.flatMap(items => items.children).map(({ component, path }) => <Route component={component} exact path={path}/>)}

大括号周围也缺少一些括号()，这导致了语法错误。

例如，在下面的部分中，您正试图销毁包含children属性的对象。但是，如果在箭头函数中使用parens，则需要使用parens包装破坏语法。

{routes.map({children} =>