Allow useMatch take RouteDefinition object instead of path.
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 35/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- typescript
- Domain
- frontend
Research direction
Start from the useMatch and useRoutes entry points and the RouteDefinition type described in the issue. Determine how a RouteDefinition object could identify the active route, then confirm that matching nested routes works while the existing path-based useMatch behavior remains intact.
Written by the indexing model from the issue text.
Description
Basically I want to know which route is currently active outside of <Routes/>, so I can for example change nav bar styles on specific page, currently this is hard to do correctly. So my proposed solution is to allow useMatch take RouteDefinition object so this works:
const LIST_ROUTE = {
path: '/list',
component: List,
children: [
{ path: '/' },
{ path: '/apples' },
{ path: '/oranges' },
{ path: '/banana' },
],
}
const routes: RouteDefinition[] = [
{
path: '/',
component: Home,
},
LIST_ROUTE,
]
export const App = () => {
const Routes = useRoutes(routes)
const isListRoute = useMatch(LIST_ROUTE)
return (
<div>
<Routes />
<BottomNavBar hide={isListRoute()} />
</div>
)
}
Alternative today is to use
const isListRoute = useMatch(() => '/list/*') // Matches everything and is not a correct solution
// or way more complicated
const isListRoute = useMatch(() => '/list/')
const isListAppleRoute = useMatch(() => '/list/apple')
const isListOrangeRoute = useMatch(() => '/list/orange')
const isListBananaRoute = useMatch(() => '/list/banana')
const isListRouteActive= createMemo(() => isListRoute() && isListAppleRoute() && isListOrangeRoute() && isListBananaRoute())
There might be some other way to solve this like having <Routes /> fire change event with matched route id.
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 180
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 19
Contributor guide
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.
More from solidjs/solid-router
-
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
solidjs/solid-router#613 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
solidjs/solid-router#605 · 1 comment ·
-
Difficulty 3/5 1-2 days Newbie friendliness 78/100
solidjs/solid-router#603 · 1 comment ·
-
<A> costs ~6us of server CPU per instance during SSR (20x a plain <a>), mostly mergeProps/splitProps Open
Difficulty 4/5 3-5 days Newbie friendliness 55/100
solidjs/solid-router#583 ·
-
enhancement
Difficulty 5/5 Over a week Newbie friendliness 35/100
solidjs/solid-router#569 · 3 comments ·
All issues in solidjs/solid-router
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
bug v2
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
modelcontextprotocol/inspector#2458 · 1 comment ·
-
Difficulty 1/5 Under an hour Newbie friendliness 75/100
railmapgen/rmp-gallery#4068 ·
-
Mend: dependency security vulnerability status: needs triage 🕵️♀️
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
carbon-design-system/ibm-products#9907 ·