循环遍历数组以创建路由

Question

我有一个单独的 routes.js：

export const routes = [
    {pathname: "/", exact: true, name: "Home Page", id: "home", component: Home},
    {pathname: "/about", exact: true, name: "About Us", id: "about", component: About},
    {pathname: "/services", exact: true, name: "Services", id: "services", component: Services},
    {pathname: "/portfolio", exact: true, name: "Portfolio", id: "portfolio", component: Portfolio},
    {pathname: "/careers", exact: true, name: "Careers", id: "careers", component: Careers},
    {pathname: "/partners", exact: true, name: "Partners", id: "partners", component: Partners},
    {pathname: "/contact", exact: true, name: "Contact Us", id: "contact", component: Contact},
    {pathname: "/blog", exact: true, name: "Blog", id: "blog", component: Blog},
    {pathname: "/not-found", exact: true, name: "Not Found", id: "not-found", component: NotFound},
];

它像这样导入到我的 App.js 中：

import { routes } from './routes.js';

const App = (props) => {     

  return (
    <div className='app-wrapper'>
      <Header />
      <BgVideo />          
        <Switch>
          <Route path={routes[0].pathname} exact component={routes[0].component} />
          <Route path={routes[1].pathname} exact component={routes[1].component} />
          <Route path={routes[2].pathname} exact component={routes[2].component} />
          <Route path={routes[3].pathname} exact component={routes[3].component} />
          <Route path={routes[4].pathname} exact component={routes[4].component} />
          <Route path={routes[5].pathname} exact component={routes[5].component} />
          <Route path={routes[6].pathname} exact component={routes[6].component} />
          <Route path={routes[7].pathname} exact component={routes[7].component} />  
          <Route path={routes[8].pathname} exact component={routes[8].component} />                           

          <Redirect to='/not-found' />
        </Switch>
    </div>
  );
};

现在这可以按预期工作，但我希望循环遍历 routes 数组而不是重复 <Route/> 9 次。

Answer 1

<Switch>
  {routes.map(route =>
     <Route key={route.id} path={route.pathname} exact component={route.component} />
  )}
  <Redirect to='/not-found' />
</Switch>

这是基本的 React 内容，我建议您阅读介绍性教程。