React Router Route only render first route from config

Question

I created a route config for react-router-dom following the official docs right here

But when I tried to implement my code, it only renders my first route from the config.

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,
  },
];

I created a component to wrap the logic of implementing the props into the Route component from react-router-dom .

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>
   )
}

What happened is that the only routes correctly rendered is the one mentioned first in the routes.js array. But when I tried to render it directly in the App.js , the routes are correctly rendered.

Direct Render - 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>
   )
}

Is there anything that I missed lol I feel so stupid at this point

Answer 1

As @patrick-evans mentioned in the comment

...you are rendering your own component RouteItem directly in the Switch instead of Route directly. Switch might be internally trying to use something like the children prop to access each route...

At the the official example , they use spread syntax ( <RouteWithSubRoutes key={i} {...route} /> ) instead of pass route as route prop: <RouteItem route={r} key={i} />) . Therefore Switch can access to route props in the example, but can't in your code.

You should just fix <RouteItem route={r} key={i} />) to <RouteItem {...r} key={i} />) and it should work. And of course change your own component to const RouteItem = (route) => {...