React Router Route 仅从配置中渲染第一条路由

Question

我按照官方文档right here 为react-router-dom 创建了一个路由配置

但是当我尝试实现我的代码时，它只从配置中呈现我的第一条路线。

routes.js

import TellerLoginPage from '../TellerLoginPage';
import TellerMenuPage from '../TellerMenuPage';

export const routeConfig = [
  {
    path: '/teller/login',
    exact: true,
    component: TellerLoginPage,
  },
  {
    path: '/teller',
    exact: true,
    component: TellerMenuPage,
  },
];

我创建了一个组件，将实现 props 的逻辑从react-router-dom 包装到Route 组件中。

RouteItem.js

import React from 'react';
import { Route } from 'react-router-dom';

const RouteItem = ({ route }) => {
  console.log(route);
  return (
    <Route
      path={route.path}
      exact={route.exact}
      render={(props) => <route.component {...props} />}
    />
  );
};

export default RouteItem;

App.js

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import RouteItem from '../../components/RouteItem';

import { routeConfig } from './routes';

function App() {
   const populateRoute = () => {
     const jsx = [];

     routeConfig.forEach((r, i) => {
       jsx.push(<RouteItem route={r} key={i} />);
     });

     return jsx;
   };

   return (
     <Router>
     // ...
       <Switch>
         {populateRoute()}
        </Switch>
      // ...
     </Router>
   )
}

发生的情况是，唯一正确渲染的路由是 routes.js 数组中第一个提到的路由。 但是当我尝试直接在App.js中渲染它时，路由被正确渲染了。

直接渲染 - App.js

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import RouteItem from '../../components/RouteItem';

import { routeConfig } from './routes';

function App() {
   return (
     <Router>
     // ...
       <Switch>
         {routeConfig.map((r, i) => {
            return <Route path={r.path} render={(props) => <r.component {...props} key={i} />} />;
         })}
        </Switch>
      // ...
     </Router>
   )
}

有什么我错过的吗哈哈，我现在觉得很愚蠢

Answer 1

作为@patrick-evans mentioned in the comment

...您正在直接在Switch 中渲染您自己的组件RouteItem，而不是直接在Route 中。 Switch 可能在内部尝试使用类似 children 的道具来访问每条路由...

在official example，他们使用扩展语法（<RouteWithSubRoutes key={i} {...route} />）而不是将route 传递为route 属性：<RouteItem route={r} key={i} />)。因此Switch 可以在示例中访问路由道具，但不能在您的代码中。

您应该将<RouteItem route={r} key={i} />) 修复为<RouteItem {...r} key={i} />)，它应该可以工作。当然也可以把你自己的组件改成const RouteItem = (route) => {...