Router state status doesn't change on latest version

[rdpascua]

Describe the bug

The kitchen sink example route state doesn't get updated, it's still stuck on pending

I've attached recording for BETA-230 and BETA-248

BETA-230

router-230.mov

BETA-248

router-248.mov

Le code

import React, { StrictMode } from 'react'
import ReactDOM from 'react-dom/client'
import {
  Outlet,
  RouterProvider,
  Link,
  Router,
  Route,
  RootRoute,
  useRouter,
} from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/router-devtools'

const rootRoute = new RootRoute({
  component: function RootIndex() {
    const { state } = useRouter()

    return (
      <>
        <div className="p-2 flex gap-2">
          <Link to="/" className="[&.active]:font-bold">
            Home
          </Link>{' '}
          <Link to="/about" className="[&.active]:font-bold">
            About
          </Link>
        </div>
        <hr />
        <h1>{state.status}</h1>
        <Outlet />
        <TanStackRouterDevtools />
      </>
    )
  },
})

const indexRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/',
  component: function Index() {
    return (
      <div className="p-2">
        <h3>Welcome Home!</h3>
      </div>
    )
  },
})

const aboutRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/about',
  component: function About() {
    return <div className="p-2">Hello from About!</div>
  },
})

const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])

const router = new Router({ routeTree })

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

const rootElement = document.getElementById('app')!
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement)
  root.render(
    <StrictMode>
      <RouterProvider router={router} />
    </StrictMode>,
  )
}

Your Example Website or App

https://stackblitz.com/edit/github-rwuc2w-zpuw8x

Steps to Reproduce the Bug or Issue

For version BETA-230

https://stackblitz.com/edit/github-rwuc2w

Version BETA-272
https://stackblitz.com/edit/github-rwuc2w-zpuw8x

Expected behavior

status should update to idle

Platform

• OS: [e.g. macOS]
• Browser: [e.g. Firefox]
• Version: [e.g. 120.01]

[schiller-manuel]

you must use useRouterState.

See the docs:

https://github.com/TanStack/router/blob/578cf99b79ec571d0f08899c83799ddee8c2f9af/docs/api/api.md?plain=1#L2026C1-L2026C252

⚠️⚠️⚠️ router.state is always up to date, but NOT REACTIVE. If you use router.state in a component, the component will not re-render when the router state changes. To get a reactive version of the router state, use the useRouterState hook.

[tannerlinsley]

Indeed, useRouterState is what you are looking for, since it will ensure a rerender with the latest state based on what you've selected.