`router`: Switch does not support Fragment-wrapped children or fallback routes

[silverwind]

This issue was written by an AI assistant (Claude) on behalf of @silverwind.

The current Switch implementation requires a flat array of Route elements and calls .find() directly on props.children. This has two limitations:

1. Fragment-wrapped children are not supported

When routes are grouped inside <>...</> fragments (common when conditionally rendering groups of routes), Switch sees the Fragment element itself rather than the Route children inside it.

<Switch>
  <>
    <Route path="/about" component={About} />
    <Route path="/home" component={Home} />
  </>
  <Route path="/settings" component={Settings} />
</Switch>

In this example, the Fragment is treated as a single child and child.props.path is undefined, so the routes inside it are never matched.

2. No fallback/catch-all route

A child without a path prop cannot act as a fallback. The current logic calls matchRoute(child.props.path, path) which returns falsy for undefined, so pathless children are always skipped. A common pattern is to place a fallback element as the last child of Switch without a path:

<Switch>
  <Route path="/about" component={About} />
  <Route path="/home" component={Home} />
  <NotFound />
</Switch>

Suggested behavior

• Recursively flatten Fragment children before matching
• Treat a child without a path prop as a catch-all that matches any route

This would align with how React Router's Switch historically worked and is a common expectation.

[silverwind]

I have a working implemenation of Switch that resolves both these issues. If you want, I can try a PR.

[Lusito]

Hi @silverwind,

Thanks for pointing out these issues.

"No fallback/catch-all route" is not entirely correct though. It is possible by specifying path="*" or path="(.*)" depending on your matcher factory, though I'm not against making path optional.

Feel free to make a PR, but if it was written by an AI, please review it yourself first. I've had enough of AI slop PRs lately.

The only thought I have on this is: React is recommending not to work with the Children API, so if that is your solution, a different approach might be necessary.

[silverwind]

1. * works as well I guess, but I think it being the default would be nice.
2. Yes, my solution uses Children and I have currently no idea how to avoid it.

So I guess I will not contribute my slop then. It works, but it would likely not match your quality standards. Here is it:

/** Recursively flatten Fragments and arrays into a flat list of elements */
function flattenChildren(children: ReactNode): ReactNode[] {
  const result: ReactNode[] = [];
  Children.forEach(children, (child) => {
    if (isValidElement(child) && child.type === Fragment) {
      result.push(...flattenChildren((child.props as any).children));
    } else {
      result.push(child);
    }
  });
  return result;
}

/** Renders the first child whose `path` matches the current route. Children without
 *  a `path` prop act as a catch-all fallback. Supports children wrapped in Fragments. */
export function Switch({children}: {children: ReactNode}) {
  const {matchRoute, path} = useRouter();
  for (const child of flattenChildren(children)) {
    if (isValidElement(child)) {
      const childPath = (child.props as any).path as string | undefined;
      if (!childPath || matchRoute(childPath, path)) {
        return child;
      }
    }
  }
  return null;
}

[Lusito]

if it's just about making conditionally rendered items possible, something like this might be another way:

<Switch>
  {condition && [
    <Route path="/about" component={About} />
    <Route path="/home" component={Home} />
  ]}
  <Route path="/settings" component={Settings} />
</Switch>

children would then have to be of a nested type SwitchChild with SwitchChild being something like:

type SwitchChild = React.ReactElement<RouteProps> | false | undefined | null | SwitchChild[];

The Switch would only have to flatten the array and remove falsey values.

Another idea might be to have a non-jsx array created in a useMemo:

const routes = useMemo(() => {
  const result = [];
  if (condition) {
    result.push({ path: "/about", component: About });
    result.push({ path: "/home", component: Home });
  }
  result.push({ path: "/settings", component: Settings });
  return result;
}, [condition]);

return <Switch routes={routes} />;

Switch could support both use-cases and you could move the logic into a custom hook to keep the current component clean.

The above is untested pseudo code.

[silverwind]

Yes, this is for conditionally rendering a bunch of routes, basically

<Switch>
  {isLoggedIn ? (
    <Fragment>
      <Route>
      <Route>
      <Route>
    </Fragment>
  ) : (
    <Login/>
  )}
</Switch>

In React, I generally prefer to avoid rendering arrays because with arrays come key problems. Both your suggestions have this problem.

I will check if there is a solution without Children. It surely is possible but as far as I'm aware Children is the only "allowed" API in React that can operate on children in a supported fashion.