Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 25 additions & 11 deletions docs/router/quick-start.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ The fastest way to get started with TanStack Router is to scaffold a new project

<!-- ::start:tabs variant="package-managers" mode="local-install" -->

react: create-tsrouter-app@latest
solid: create-tsrouter-app@latest --framework solid
react: @tanstack/cli create --router-only
solid: @tanstack/cli create --router-only --framework solid

<!-- ::end:tabs -->

Expand All @@ -25,7 +25,7 @@ The CLI will guide you through a short series of prompts to customize your setup
Once complete, a new project will be generated with TanStack Router installed and ready to use.

> [!TIP]
> For full details on available options and templates, visit the [`create-tsrouter-app` documentation](https://github.com/TanStack/create-tsrouter-app/tree/main/cli/create-tsrouter-app).
> For full details on available options and templates, visit the [`@tanstack/cli` documentation](https://github.com/TanStack/cli).

## Routing Options

Expand All @@ -35,23 +35,37 @@ TanStack Router supports both file-based and code-based route configurations. Yo

The file-based approach is the recommended option for most projects. It automatically creates routes based on your file structure, giving you the best mix of performance, simplicity, and developer experience.

<!-- ::start:tabs variant="package-manager" mode="local-install" -->
For more details, see the [file-based routing documentation](./routing/file-based-routing.md) or

react: create-tsrouter-app@latest my-app --template file-router
solid: create-tsrouter-app@latest my-app --framework solid --template file-router
<!-- ::start:framework -->

<!-- ::end:tabs -->
# React

[explore the live example](https://tanstack.com/router/latest/docs/framework/react/examples/basic-file-based)

# Solid

[explore the live example](https://tanstack.com/router/latest/docs/framework/solid/examples/basic-file-based)

<!-- ::end:framework -->

### Code-Based Route Configuration

If you prefer to define routes programmatically, you can use the code-based route configuration. This approach gives you full control over routing logic.

<!-- ::start:tabs variant="package-manager" mode="local-install" -->
For more details, see the [code-based routing documentation](./routing/code-based-routing.md) or

react: create-tsrouter-app@latest my-app
solid: create-tsrouter-app@latest my-app --framework solid
<!-- ::start:framework -->

<!-- ::end:tabs -->
# React

[explore the live example](https://tanstack.com/router/latest/docs/framework/react/examples/basic)

# Solid

[explore the live example](https://tanstack.com/router/latest/docs/framework/solid/examples/basic)

<!-- ::end:framework -->

With either approach, navigate to your project directory and start the development server.

Expand Down
Loading