fix(react-router): implicit navigations causes flicker during rendering (#5905)

Co-authored-by: vsh1h <[email protected]>

Author: vsh1h

examples/react/start-large/src/typePrimitives.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import { Link, redirect, useNavigate } from '@tanstack/react-router'
 import type {
   RegisteredRouter,
@@ -20,7 +21,13 @@ export function useCustomNavigate<TRouter extends RegisteredRouter, TOptions>(
 ): void
 export function useCustomNavigate(options: ValidateNavigateOptions): void {
   const navigate = useNavigate()
-  navigate(options)
+
+  const useIsomorphicLayoutEffect =
+    typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect
+
+  useIsomorphicLayoutEffect(() => {
+    navigate(options)
+  }, [navigate, options])
 }
 
 export function MyLink<TRouter extends RegisteredRouter, TOptions>(

examples/solid/start-large/src/typePrimitives.tsx

@@ -1,4 +1,5 @@
 import { Link, redirect, useNavigate } from '@tanstack/solid-router'
+import { onMount } from 'solid-js'
 import type {
   RegisteredRouter,
   ValidateFromPath,
@@ -21,7 +22,10 @@ export function useCustomNavigate<TRouter extends RegisteredRouter, TOptions>(
 ): void
 export function useCustomNavigate(options: ValidateNavigateOptions): void {
   const navigate = useNavigate()
-  navigate(options)
+
+  onMount(() => {
+    navigate(options)
+  })
 }
 
 export function MyLink<TRouter extends RegisteredRouter, TOptions>(

packages/react-router/src/useNavigate.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { useLayoutEffect } from './utils'
 import { useRouter } from './useRouter'
 import type {
   AnyRouter,
@@ -67,7 +68,7 @@ export function Navigate<
     TMaskFrom,
     TMaskTo
   > | null>(null)
-  React.useEffect(() => {
+  useLayoutEffect(() => {
     if (previousPropsRef.current !== props) {
       navigate(props)
       previousPropsRef.current = props