Skip to content

Latest commit

 

History

History
 
 

multiple-params

README.md

Multiple Params Example

This shows how you can structure your routes to support multiple parameters.

Here's the file structure for this project:

app
├── db.ts
├── entry.client.tsx
├── entry.server.tsx
├── root.tsx
└── routes
    ├── clients
    │   ├── $clientId
    │   │   ├── index.tsx
    │   │   ├── invoices
    │   │   │   ├── $invoiceId.tsx
    │   │   │   └── index.tsx
    │   │   └── invoices.tsx
    │   ├── $clientId.tsx
    │   └── index.tsx
    ├── clients.tsx
    └── index.tsx

Here's the output of remix routes for this project:

<Routes>
  <Route file="root.tsx">
    <Route path="clients" file="routes/clients.tsx">
      <Route path=":clientId" file="routes/clients.$clientId.tsx">
        <Route path="invoices" file="routes/clients.$clientId.invoices.tsx">
          <Route
            path=":invoiceId"
            file="routes/clients.$clientId.invoices.$invoiceId.tsx"
          />
          <Route index file="routes/clients.$clientId.invoices._index.tsx" />
        </Route>
        <Route index file="routes/clients.$clientId._index.tsx" />
      </Route>
      <Route index file="routes/clients._index.tsx" />
    </Route>
    <Route index file="routes/_index.tsx" />
  </Route>
</Routes>

Development

From your terminal:

npm install
npm run dev

This starts your app in development mode, rebuilding assets on file changes.

Deployment

First, build your app for production:

npm run build

Then run the app in production mode:

npm start

Preview

Open this example on CodeSandbox:

Open in CodeSandbox