You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: docs/router/framework/react/quick-start.md
+10-12
Original file line number
Diff line number
Diff line change
@@ -22,10 +22,12 @@ bun create @tanstack/router
22
22
deno init --npm @tanstack/router
23
23
```
24
24
25
-
Follow the prompts to setup the project.
25
+
Follow the prompts to setup the a fully setup TanStack Router project.
26
26
27
27
### Manual Setup
28
28
29
+
Alternatively, you can manually setup the project using the following steps:
30
+
29
31
#### Install TanStack Router, Vite Plugin, and the Router Devtools
30
32
31
33
```sh
@@ -55,27 +57,23 @@ import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
55
57
// https://vitejs.dev/config/
56
58
exportdefaultdefineConfig({
57
59
plugins: [
58
-
TanStackRouterVite(),
60
+
TanStackRouterVite{ autoCodeSplitting: true }),
59
61
viteReact(),
60
62
// ...,
61
63
],
62
64
})
63
65
```
64
66
65
67
> [!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.
67
69
68
70
Create the following files:
69
71
70
72
-`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`
73
75
-`src/main.tsx`
74
76
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.
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`.
139
137
140
138
Import the generated route tree and create a new router instance:
0 commit comments