Parallel routes
PR Checklist
Please check if your PR fulfills the following requirements:
- [ ] Tests for the changes have been added (for bug fixes / features)
PR Type
What kind of change does this PR introduce?
- [ ] Bugfix
- [x] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] infrastructure changes
- [ ] Other... Please describe:
What is the current behavior?
Start's FS Routing doesn't support parallel routes
What is the new behavior?
Putting @ at the start of a filesystem route segment turns it into a slot for a parallel route, as detailed in https://github.com/solidjs/solid-router/pull/426.
Implementing the example config from https://github.com/solidjs/solid-router/pull/426 would look something like this with FS routing (and flat routing from #1482 for conciseness):
routes/
(app).tsx - {props.slots.breadcrumbs} <main>{props.children}</main>
(app)/
o.[orgSlug]/
index.tsx - "Org Information"
t.[tenantSlug].tsx - "Tenant Information"
@breadcrumbs.tsx - <header>{props.children}</header>
@breadcrumbs/
o.[orgSlug].tsx - <span>Org Breadcrumb</span> {props.children}
o.[orgSlug]/
[...rest].tsx - ensures breadcrumb is matched on all org routes
t.[tenantSlug].tsx - <span>Tenant Breadcrumb</span>
t.[tenantSlug]/
[...rest].tsx - ensures breadcrumb is matched on all tenant routes
Other information
🦋 Changeset detected
Latest commit: 8cc9d21ccf0e9d470f8f56acb5918cb676450320
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 1 package
| Name | Type |
|---|---|
| @solidjs/start | Minor |
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
commit: 8cc9d21
pnpm add https://pkg.pr.new/@solidjs/start@1537
More templates
- example-bare
- example-basic
- example-experiments
- example-hackernews
- example-notes
- example-todomvc
- example-with-auth
- example-with-authjs
- example-with-drizzle
- example-with-mdx
- example-with-prisma
- example-with-solid-styled
- example-with-tailwindcss
- example-with-trpc
- example-with-unocss
- example-with-vitest