Open
Description
Which project does this relate to?
Router
Describe the bug
import {
createRootRoute,
createRouter,
lazyRouteComponent,
RouterProvider
} from '@tanstack/react-router'
function Loading() {
return (
<div
style={{
position: 'fixed',
left: 0,
top: 0,
backgroundColor: 'red',
width: '100%',
height: '100%'
}}
>
loading
</div>
)
}
const RootRoute = createRootRoute({
component: lazyRouteComponent(() => import('./Comp01')),
pendingComponent: Loading
})
function RouterApp() {
const router = createRouter({
routeTree: RootRoute,
defaultPreload: 'intent',
scrollRestoration: true,
defaultPendingComponent: Loading
})
return <RouterProvider router={router} />
}
export default function Demo() {
return <RouterApp />
}Your Example Website or App
code route
Steps to Reproduce the Bug or Issue
import {
createRootRoute,
createRouter,
lazyRouteComponent,
RouterProvider
} from '@tanstack/react-router'
function Loading() {
return (
<div
style={{
position: 'fixed',
left: 0,
top: 0,
backgroundColor: 'red',
width: '100%',
height: '100%'
}}
>
loading
</div>
)
}
const RootRoute = createRootRoute({
component: lazyRouteComponent(() => import('./Comp01')),
pendingComponent: Loading
})
function RouterApp() {
const router = createRouter({
routeTree: RootRoute,
defaultPreload: 'intent',
scrollRestoration: true,
defaultPendingComponent: Loading
})
return <RouterProvider router={router} />
}
export default function Demo() {
return <RouterApp />
}Expected behavior
I hope there will be a loading effect when refreshing the webpage, but now the loading component is not working. I don't know if what I wrote is correct, but I am referring to the example on the official website
Screenshots or Videos
No response
Platform
- OS: [e.g. macOS, Windows, Linux]
- Browser: [e.g. Chrome, Safari, Firefox]
- Version: [e.g. 91.1]
Additional context
No response
Metadata
Metadata
Assignees
Labels
No labels