Q: React-Router-Dom v5 - Switch doesn't work with mapping array of Route components I have setup react-router-dom like in the attached code. Problem is, Switch stops working after it has hit #1 in the code. I can't seem to understand why it doesn't work. It works if I remove .map() and do everything manually. With using .map(), What I see happening is, The routes defined till the first navLink with children (including that navLink, subroutes too) work. After that none of the routes work. In the attached code, the routes after navLink with title Pools will not work. The first time it deals with the subroutes well, but something breaks after the first time. After that even navLink without children wouldn't work. I have tried adding Switch components outside each code that using .map() but no luck. I tried debugging using Chrome DevTools, what I see is, from the Switch component's prepective there are no children after the navLinks that work. What could possibly cause this?
Also, In the React devtools, Switch's children are not a flat array, it has nesting in it. Whereas if I did everything manually it will not have nesting.
export const Page = () => {
const navLinks = [{
    title: "Data Centers",
    icon: mdiDatabase,
    modelName: "dataCenter",
    url: "/datacenters",
  },
  {
    title: "Pools",
    icon: mdiServerNetwork,
    url: "/pools",
    modelName: "pool",
    children: [
      { title: "Pool Status", url: "/status", modelName: "poolStatus" },
      { title: "Profiles", url: "/profiles", modelName: "poolProfile" },
    ],
  },
  ... 
];

return <Switch>
  {navLinks.map((navLink) => {
    if (navLink.children) {
      // Get the component to render for this table
      const Component = modelToPageMap[navLink.modelName];
      return (
        <>
          {allowedTableNames.includes(navLink.modelName) && (
            <Route path={`${path}${navLink.url}`} exact>
              <Component />
            </Route>
          )}
          {/* #1 Once these routes are mapped once, they broke the route */}
          {navLink.children
            .filter((e) => allowedTableNames.includes(e.modelName))
            .map((child) => {
              // Get the component to render for this table
              const Component = modelToPageMap[child.modelName];
              return (
                <Route path={`${path}${navLink.url}${child.url}`}>
                  <Component />
                </Route>
              );
            })}
        </>
      );
    }

    if (allowedTableNames.includes(navLink.modelName)) {
      const Component = modelToPageMap[navLink.modelName];
      return (
        <Route path={`${path}${navLink.url}`} exact>
          <Component />
        </Route>
      );
    }

    return null;
  })}
</Switch>;
}

Hope I explained myself well, please ask if you didn't understand my problem.

A: I rewrote my code. This time it works, This time I pushed each Route into a array and used flatMap() to get a flattened array. Works like a charm. I think React.Fragment (or <></>) I used was causing the problem.
export const Page = () => {
  const navLinks = [
    {
      title: "Data Centers",
      icon: mdiDatabase,
      modelName: "dataCenter",
      url: "/datacenters",
    },
    {
      title: "Pools",
      icon: mdiServerNetwork,
      url: "/pools",
      modelName: "pool",
      children: [
        { title: "Pool Status", url: "/status", modelName: "poolStatus" },
        { title: "Profiles", url: "/profiles", modelName: "poolProfile" },
      ],
    },
  ];
  return (
    <Switch>
      {navLinks.flatMap((navLink) => {
        const routes: React.ReactElement[] = [];

        if (allowedTableNames.includes(navLink.modelName)) {
          const Component = modelToPageMap[navLink.modelName];
          routes.push(
            <Route path={`${path}${navLink.url}`} exact>
              <Component />
            </Route>
          );
        }

        if (navLink.children) {
          routes.push(
            ...navLink.children
              .filter((e) => allowedTableNames.includes(e.modelName))
              .map((child) => {
                const Component = modelToPageMap[child.modelName];
                return (
                  <Route path={`${path}${navLink.url}${child.url}`} exact>
                    <Component />
                  </Route>
                );
              })
          );
        }

        return routes;
      })}
    </Switch>
  );
};

