sensitive-blue

how to utilize the router to navigate ?

hi, do i miss something about utilizing the router.navigate() ? i exported the router from the app.tsx file so i can navigate from anywhere in my app (useNavigate would force me to be in a hook or component, i sometime want to navigate from an action). my is duplicated from doing it the way i do :

import ReactDOM from 'react-dom/client'
import { RouterProvider, createRouter } from '@tanstack/react-router'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { routeTree } from './routeTree.gen'
import './App.css'

const queryClient = new QueryClient()

export const router = createRouter({
    routeTree,
    context: { queryClient },
    defaultPreload: 'intent',
    defaultPreloadStaleTime: 0,
    scrollRestoration: true,
})

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(
        <QueryClientProvider client={queryClient}>
            <RouterProvider router={router} />
        </QueryClientProvider>
    )
}

import ReactDOM from 'react-dom/client'
import { RouterProvider, createRouter } from '@tanstack/react-router'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { routeTree } from './routeTree.gen'
import './App.css'

const queryClient = new QueryClient()

export const router = createRouter({
    routeTree,
    context: { queryClient },
    defaultPreload: 'intent',
    defaultPreloadStaleTime: 0,
    scrollRestoration: true,
})

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(
        <QueryClientProvider client={queryClient}>
            <RouterProvider router={router} />
        </QueryClientProvider>
    )
}

the error : App.tsx:26 You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it. thx 🙂

4 Replies

sensitive-blueOP•5mo ago

i found a workaround by calling useNavigate in my component and passing it as an argument to my action, now i dont have to export/import my router to navigate and i dont have my application x2, BUT: i would still like to understand how to navigate with the router.navigate() method if possible

rival-black•5mo ago

You can use the useRouter hook to get the router. https://tanstack.com/router/latest/docs/framework/react/api/router/useRouterHook FYI useNavigate uses it internally https://github.com/TanStack/router/blob/main/packages/react-router/src/useNavigate.tsx

useRouter hook | TanStack Router React Docs

The useRouter method is a hook that returns the current instance of from context. This hook is useful for accessing the router instance in a component. useRouter returns The current instance. ⚠️⚠️⚠️ r...

GitHub

router/packages/react-router/src/useNavigate.tsx at main · TanStac...

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

sensitive-blueOP•5mo ago

im wondering if i look at the wrong doc cause its gives 4 ways to navigate and i didnt see that : https://tanstack.com/router/latest/docs/framework/react/guide/navigation

Navigation | TanStack Router React Docs

Everything is Relative Believe it or not, every navigation within an app is relative, even if you aren't using explicit relative path syntax (../../somewhere). Any time a link is clicked or an imperat...

sensitive-blueOP•5mo ago

the router.navigate provided in this doc was interesting because we could use it wherever we want, but if i use useNavigate or useRouter i cant call it outside a hook or component right ? router.navigate The router.navigate method is the same as the navigate function returned by useNavigate and accepts the same NavigateOptions interface. Unlike the useNavigate hook, it is available anywhere your router instance is available and is thus a great way to navigate imperatively from anywhere in your application, including outside of your framework. maybe i dont understand it the way it should tho

Gaming

Programming

how to utilize the router to navigate ?

Did you find this page helpful?