Add state to next/link, similar to history.pushState

[Capricair]

Describe the feature you'd like to request

next/link can add state props, which can be received in next/router, similar to history.pushState, which can be used to control page loading when client-side rendering

Describe the solution you'd like

Can next/link come with an extra parameter so that it can be received in the router, like this

<Link href="/" state={{ loading: true }}>Home</Link>

export default function useRouterLoading() {
  const router = useRouter()

  useEffect(() => {
    function handleRouteChangeStart() {
      if (router.state.loading){
        Helper.pageLoading(true)
      }
    }

    function handleRouteChangeComplete() {
      if (router.state.loading){
        Helper.pageLoading(false)
      }
    }

    router.events.on("routeChangeStart", handleRouteChangeStart)
    router.events.on("routeChangeComplete", handleRouteChangeComplete)

    return function unmount() {
      router.events.off("routeChangeStart", handleRouteChangeStart)
      router.events.off("routeChangeComplete", handleRouteChangeComplete)
    }
  }, [])
}

Describe alternatives you've considered

<Link href="/" state={{ loading: true }}>Home</Link>

export default function useRouterLoading() {
  const router = useRouter()

  useEffect(() => {
    function handleRouteChangeStart(url, {loading}) {
      if (loading){
        Helper.pageLoading(true)
      }
    }

    function handleRouteChangeComplete(url, {loading}) {
      if (loading){
        Helper.pageLoading(false)
      }
    }

    router.events.on("routeChangeStart", handleRouteChangeStart)
    router.events.on("routeChangeComplete", handleRouteChangeComplete)

    return function unmount() {
      router.events.off("routeChangeStart", handleRouteChangeStart)
      router.events.off("routeChangeComplete", handleRouteChangeComplete)
    }
  }, [])
}

[thibautsabot]

Hello!

You could use a query param for that.
If you don't want for it to appear on the url, you could also pair it with the as property.

Something like:

<Link
  href={{
    pathname: "/story/test",
    query: { loading: "on" },
  }}
  as="/story/test"
>
  Hello
</Link>

When clicking on the Link, you'll go to /story/test but will be able to retrieve the query param:

const { query } = useRouter()

console.log(query.loading)

[Capricair]

I know this can be done, but loading should be a state, not a query param, If you put loading in query param, it means that you need to jump link to cancel loading, although you can use as to make the url look the same, but I think it is unreasonable

[alanhamlett]

Currently we're using global state as a hack around this, but it's not preserved when the user refreshes the page. Would love to be able to pass state to the next page when users click links.

[timneutkens]

#35654 (comment)

[timneutkens]

pushState / replaceState are supported since 14.1: https://nextjs.org/blog/next-14-1
Docs: https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#windowhistorypushstate

[alanhamlett]

Oh, I tried that on 14.1.4 and it caused my loading progress bar to display. Maybe it will work if I look further.. thanks!

[alanhamlett]

Also #62675 bug makes me not want to bypass next router.

[alanhamlett]

Using global state in sessionStorage persists across refreshes. A good workaround.

[switz]

using pushState kicks my firefox browser to 100% cpu in dev mode – haven't tested it in prod yet. I'm running latest next and firefox