Parallel routes

[Brendonovich]

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
• 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 solidjs/solid-router#426.

Implementing the example config from solidjs/solid-router#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-bot]

🦋 Changeset detected

Latest commit: 8cc9d21

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

[pkg-pr-new]

commit: 8cc9d21

pnpm add https://pkg.pr.new/@solidjs/start@1537

Open in Stackblitz

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