router icon indicating copy to clipboard operation
router copied to clipboard

Router defaultPendingComponent Not effective(version:1.121.24)

Open yibird opened this issue 6 months ago • 0 comments

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

yibird avatar Jun 19 '25 04:06 yibird