reactjs - 在 foreach 循环中从导入文件中获取函数

Question

作为 Reactjs 的新手，我很难解释这一点，但我试图在不同的页面（routes.js）上定义所有页面（组件、路由等）并在 app.js 页面上循环以构建所有页面/路线。但是页面的导入不起作用，因为我没有在同一页面上定义它们。

当我不使用 foreach 时，页面将加载。

//app.js
import RC from './constants/Routes';
import {Page1,Page2,Page3} from "./components/pages";// not used here but set in route.js

<Switch>
    {Object.keys(RC).forEach(key=>{
        <Route path={RC[key].route} component={RC[key].component}/>
    })}
</Switch>


//routes.js
export default Object.freeze({
    PAGE1: {
        route: '/page1',
        component: 'Page1'
    },
    PAGE2: {
        route: '/page2',
        component: 'Page2'
    },
    PAGE3: {
        route: '/page3',
        component: 'Page3'
    },
});

标签： reactjs