Skip to content

Commit e6aed4c

Browse files
committedJan 30, 2025·
docs(react-router): remove lazy from quickstart, auto code splitting instead
1 parent 6e7683f commit e6aed4c

File tree

1 file changed

+10
-12
lines changed

1 file changed

+10
-12
lines changed
 

‎docs/router/framework/react/quick-start.md

+10-12
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,12 @@ bun create @tanstack/router
2222
deno init --npm @tanstack/router
2323
```
2424

25-
Follow the prompts to setup the project.
25+
Follow the prompts to setup the a fully setup TanStack Router project.
2626

2727
### Manual Setup
2828

29+
Alternatively, you can manually setup the project using the following steps:
30+
2931
#### Install TanStack Router, Vite Plugin, and the Router Devtools
3032

3133
```sh
@@ -55,27 +57,23 @@ import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
5557
// https://vitejs.dev/config/
5658
export default defineConfig({
5759
plugins: [
58-
TanStackRouterVite(),
60+
TanStackRouterVite{ autoCodeSplitting: true }),
5961
viteReact(),
6062
// ...,
6163
],
6264
})
6365
```
6466

6567
> [!TIP]
66-
> If you are not using Vite, or any supported bundler, you can check out the [File-Based Routing](./guide/file-based-routing.md) guide for more info.
68+
> If you are not using Vite, or any supported bundler, you can check out the [TanStack Router CLI](./guide/file-based-routing.md#configuration-with-the-tanstack-router-cli) guide for more info.
6769
6870
Create the following files:
6971

7072
- `src/routes/__root.tsx`
71-
- `src/routes/index.lazy.tsx`
72-
- `src/routes/about.lazy.tsx`
73+
- `src/routes/index.tsx`
74+
- `src/routes/about.tsx`
7375
- `src/main.tsx`
7476

75-
All routes/\*.tsx files should export an object named **Route**, created using createRootRoute or createLazyFileRoute.
76-
77-
> 🧠 Route files with the `.lazy.tsx` extension are lazy loaded via separate bundles to keep the main bundle size as lean as possible.
78-
7977
#### `src/routes/__root.tsx`
8078

8179
```tsx
@@ -101,7 +99,7 @@ export const Route = createRootRoute({
10199
})
102100
```
103101

104-
#### `src/routes/index.lazy.tsx`
102+
#### `src/routes/index.tsx`
105103

106104
```tsx
107105
import { createLazyFileRoute } from '@tanstack/react-router'
@@ -119,7 +117,7 @@ function Index() {
119117
}
120118
```
121119

122-
#### `src/routes/about.lazy.tsx`
120+
#### `src/routes/about.tsx`
123121

124122
```tsx
125123
import { createLazyFileRoute } from '@tanstack/react-router'
@@ -135,7 +133,7 @@ function About() {
135133

136134
#### `src/main.tsx`
137135

138-
Regardless of whether you are using the `@tanstack/router-plugin` package and running the `npm run dev`/`npm run build` scripts, or manually running the `tsr watch`/`tsr generate` commands from your package scripts, the following file will be generated for you at `src/routeTree.gen.ts`.
136+
Regardless of whether you are using the `@tanstack/router-plugin` package and running the `npm run dev`/`npm run build` scripts, or manually running the `tsr watch`/`tsr generate` commands from your package scripts, the route tree file will be generated at `src/routeTree.gen.ts`.
139137

140138
Import the generated route tree and create a new router instance:
141139

0 commit comments

Comments
 (0)
Please sign in to comment.