`router`: Switch does not support Fragment-wrapped children or fallback routes
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 41
- Forks
- 4
- PR merge metrics
- No merged PRs in 30d
Description
*This issue was written by an AI assistant (Claude) on behalf of [@silverwind](https://github.com/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.
```jsx
<>
```
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`:
```jsx
```
### 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.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the Switch implementation described in the issue and inspect how props.children is currently traversed and matched. Verify the change against the fragment-wrapped routes and pathless fallback examples in the issue, then run the project's existing tests to confirm both route forms work.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 39/100