Lusito / Lusito/react-nano

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

Open
#5 5 comments 0 reactions 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.