File tree Expand file tree Collapse file tree 11 files changed +328
-219
lines changed
basic-tsr-config/src/app/routes
custom-basepath/src/routes
scroll-restoration/src/routes
server-functions/src/routes
packages/solid-start-client/src Expand file tree Collapse file tree 11 files changed +328
-219
lines changed Original file line number Diff line number Diff line change 1- import * as Solid from 'solid-js'
2- import { Outlet , createRootRoute } from '@tanstack/solid-router'
1+ import {
2+ HeadContent ,
3+ Outlet ,
4+ Scripts ,
5+ createRootRoute ,
6+ } from '@tanstack/solid-router'
37import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
8+ import { HydrationScript } from 'solid-js/web'
49
510export const Route = createRootRoute ( {
611 head : ( ) => ( {
@@ -22,9 +27,16 @@ export const Route = createRootRoute({
2227
2328function RootComponent ( ) {
2429 return (
25- < >
26- < Outlet />
27- < TanStackRouterDevtools position = "bottom-right" />
28- </ >
30+ < html >
31+ < head >
32+ < HeadContent />
33+ < HydrationScript />
34+ </ head >
35+ < body >
36+ < Outlet />
37+ < TanStackRouterDevtools position = "bottom-right" />
38+ < Scripts />
39+ </ body >
40+ </ html >
2941 )
3042}
Original file line number Diff line number Diff line change 11// DO NOT DELETE THIS FILE!!!
22// This file is a good smoke test to make sure the custom client entry is working
33import { hydrate } from 'solid-js/web'
4- import { StartClient } from '@tanstack/solid-start/client'
4+ import { StartClient , hydrateStart } from '@tanstack/solid-start/client'
55
66console . log ( "[client-entry]: using custom client entry in 'src/client.tsx'" )
77
8- hydrate ( ( ) => < StartClient /> , document . body )
8+ const router = await hydrateStart ( )
9+
10+ hydrate ( ( ) => < StartClient router = { router } /> , document . body )
Original file line number Diff line number Diff line change 11/// <reference types="vite/client" />
2- import { Link , Outlet , createRootRoute } from '@tanstack/solid-router'
2+ import {
3+ HeadContent ,
4+ Link ,
5+ Outlet ,
6+ Scripts ,
7+ createRootRoute ,
8+ } from '@tanstack/solid-router'
39
410import { TanStackRouterDevtoolsInProd } from '@tanstack/solid-router-devtools'
11+ import { HydrationScript } from 'solid-js/web'
512import { NotFound } from '~/components/NotFound'
613import appCss from '~/styles/app.css?url'
714import { seo } from '~/utils/seo'
@@ -60,86 +67,93 @@ export const Route = createRootRoute({
6067
6168function RootComponent ( ) {
6269 return (
63- < >
64- < div class = "p-2 flex gap-2 text-lg" >
65- < Link
66- to = "/"
67- activeProps = { {
68- class : 'font-bold' ,
69- } }
70- activeOptions = { { exact : true } }
71- >
72- Home
73- </ Link > { ' ' }
74- < Link
75- to = "/posts"
76- activeProps = { {
77- class : 'font-bold' ,
78- } }
79- >
80- Posts
81- </ Link > { ' ' }
82- < Link
83- to = "/users"
84- activeProps = { {
85- class : 'font-bold' ,
86- } }
87- >
88- Users
89- </ Link > { ' ' }
90- < Link
91- to = "/layout-a"
92- activeProps = { {
93- class : 'font-bold' ,
94- } }
95- >
96- Layout
97- </ Link > { ' ' }
98- < Link
99- to = "/scripts"
100- activeProps = { {
101- class : 'font-bold' ,
102- } }
103- >
104- Scripts
105- </ Link > { ' ' }
106- < Link
107- to = "/inline-scripts"
108- activeProps = { {
109- class : 'font-bold' ,
110- } }
111- >
112- Inline Scripts
113- </ Link > { ' ' }
114- < Link
115- to = "/deferred"
116- activeProps = { {
117- class : 'font-bold' ,
118- } }
119- >
120- Deferred
121- </ Link > { ' ' }
122- < Link
123- to = "/redirect"
124- activeProps = { {
125- class : 'font-bold' ,
126- } }
127- >
128- redirect
129- </ Link > { ' ' }
130- < Link
131- // @ts -expect-error
132- to = "/this-route-does-not-exist"
133- activeProps = { {
134- class : 'font-bold' ,
135- } }
136- >
137- This Route Does Not Exist
138- </ Link >
139- </ div >
140- < Outlet />
141- < div class = "inline-div" > This is an inline styled div</ div >
142- < TanStackRouterDevtoolsInProd />
143- </ >
70+ < html >
71+ < head >
72+ < HeadContent />
73+ < HydrationScript />
74+ </ head >
75+ < body >
76+ < div class = "p-2 flex gap-2 text-lg" >
77+ < Link
78+ to = "/"
79+ activeProps = { {
80+ class : 'font-bold' ,
81+ } }
82+ activeOptions = { { exact : true } }
83+ >
84+ Home
85+ </ Link > { ' ' }
86+ < Link
87+ to = "/posts"
88+ activeProps = { {
89+ class : 'font-bold' ,
90+ } }
91+ >
92+ Posts
93+ </ Link > { ' ' }
94+ < Link
95+ to = "/users"
96+ activeProps = { {
97+ class : 'font-bold' ,
98+ } }
99+ >
100+ Users
101+ </ Link > { ' ' }
102+ < Link
103+ to = "/layout-a"
104+ activeProps = { {
105+ class : 'font-bold' ,
106+ } }
107+ >
108+ Layout
109+ </ Link > { ' ' }
110+ < Link
111+ to = "/scripts"
112+ activeProps = { {
113+ class : 'font-bold' ,
114+ } }
115+ >
116+ Scripts
117+ </ Link > { ' ' }
118+ < Link
119+ to = "/inline-scripts"
120+ activeProps = { {
121+ class : 'font-bold' ,
122+ } }
123+ >
124+ Inline Scripts
125+ </ Link > { ' ' }
126+ < Link
127+ to = "/deferred"
128+ activeProps = { {
129+ class : 'font-bold' ,
130+ } }
131+ >
132+ Deferred
133+ </ Link > { ' ' }
134+ < Link
135+ to = "/redirect"
136+ activeProps = { {
137+ class : 'font-bold' ,
138+ } }
139+ >
140+ redirect
141+ </ Link > { ' ' }
142+ < Link
143+ // @ts -expect-error
144+ to = "/this-route-does-not-exist"
145+ activeProps = { {
146+ class : 'font-bold' ,
147+ } }
148+ >
149+ This Route Does Not Exist
150+ </ Link >
151+ </ div >
152+ < Outlet />
153+ < div class = "inline-div" > This is an inline styled div</ div >
154+ < TanStackRouterDevtoolsInProd />
155+ < Scripts />
156+ </ body >
157+ </ html >
144158 )
145159}
Original file line number Diff line number Diff line change 1- import { Link , Outlet , createRootRoute } from '@tanstack/solid-router'
1+ import {
2+ HeadContent ,
3+ Link ,
4+ Outlet ,
5+ Scripts ,
6+ createRootRoute ,
7+ } from '@tanstack/solid-router'
28
39import { TanStackRouterDevtoolsInProd } from '@tanstack/solid-router-devtools'
10+ import { HydrationScript } from 'solid-js/web'
411import { NotFound } from '~/components/NotFound'
512import appCss from '~/styles/app.css?url'
613import { seo } from '~/utils/seo'
@@ -48,53 +55,60 @@ export const Route = createRootRoute({
4855
4956function RootComponent ( ) {
5057 return (
51- < >
52- < div class = "p-2 flex gap-2 text-lg" >
53- < Link
54- to = "/"
55- activeProps = { {
56- class : 'font-bold' ,
57- } }
58- activeOptions = { { exact : true } }
59- >
60- Home
61- </ Link > { ' ' }
62- < Link
63- to = "/posts"
64- activeProps = { {
65- class : 'font-bold' ,
66- } }
67- >
68- Posts
69- </ Link > { ' ' }
70- < Link
71- to = "/users"
72- activeProps = { {
73- class : 'font-bold' ,
74- } }
75- >
76- Users
77- </ Link > { ' ' }
78- < Link
79- to = "/deferred"
80- activeProps = { {
81- class : 'font-bold' ,
82- } }
83- >
84- Deferred
85- </ Link > { ' ' }
86- < Link
87- // @ts -expect-error
88- to = "/this-route-does-not-exist"
89- activeProps = { {
90- class : 'font-bold' ,
91- } }
92- >
93- This Route Does Not Exist
94- </ Link >
95- </ div >
96- < Outlet />
97- < TanStackRouterDevtoolsInProd />
98- </ >
58+ < html >
59+ < head >
60+ < HeadContent />
61+ < HydrationScript />
62+ </ head >
63+ < body >
64+ < div class = "p-2 flex gap-2 text-lg" >
65+ < Link
66+ to = "/"
67+ activeProps = { {
68+ class : 'font-bold' ,
69+ } }
70+ activeOptions = { { exact : true } }
71+ >
72+ Home
73+ </ Link > { ' ' }
74+ < Link
75+ to = "/posts"
76+ activeProps = { {
77+ class : 'font-bold' ,
78+ } }
79+ >
80+ Posts
81+ </ Link > { ' ' }
82+ < Link
83+ to = "/users"
84+ activeProps = { {
85+ class : 'font-bold' ,
86+ } }
87+ >
88+ Users
89+ </ Link > { ' ' }
90+ < Link
91+ to = "/deferred"
92+ activeProps = { {
93+ class : 'font-bold' ,
94+ } }
95+ >
96+ Deferred
97+ </ Link > { ' ' }
98+ < Link
99+ // @ts -expect-error
100+ to = "/this-route-does-not-exist"
101+ activeProps = { {
102+ class : 'font-bold' ,
103+ } }
104+ >
105+ This Route Does Not Exist
106+ </ Link >
107+ </ div >
108+ < Outlet />
109+ < TanStackRouterDevtoolsInProd />
110+ < Scripts />
111+ </ body >
112+ </ html >
99113 )
100114}
You can’t perform that action at this time.
0 commit comments