Support nested Switches
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 7.9k
- Forks
- 190
- Avg merge
- 12h 50m
- Merged PRs (30d)
- 3
Description
Hi, I've read the docs to see if nested Switches are supported (a longstanding wish), and I think they are not, so I wanted to make a feature proposal.
The idea is that a switch picks the first matching route or switch. A switch matches if one of its routes (or switches) matches. It's basically the Composite pattern.
The use-case is this one:
<Switch>
<Route path="blue/one"/>
<Route path="red/one"/>
<Route path="bread/one"/>
<Route path="apple/one"/>
</Switch>
If I want to create separate route groups for "color" or "food" then it would be great if I can refactor this to
// Switch that renders either ColorsSwitch or FoodsSwitch.
// This approach can be used to clean up switches with many routes.
// It can also be used to reuse switches in different locations.
<Switch>
<ColorsSwitch/>
<FoodsSwitch/>
</Switch>
const ColorsSwitch = () => {
return (
<Switch>
<Route path="blue/one"/>
<Route path="red/one"/>
</Switch>
)
}
const FoodsSwitch = () => {
return (
<Switch>
<Route path="bread/one"/>
<Route path="apple/one"/>
</Switch>
)
}
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
The issue names only the Switch and Route components, not source files or tests. Start by locating their implementation and existing routing tests; done means nested switches can be composed and select the first matching route or switch, with tests covering the grouped example.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100