Is Router Context dynamic?

react

I am working on auth in React Router and I am confused by if Route.useRouteContext can be used the same way as a standard React context.

When I use Route.useRouteContext like so:

// Only works on manual re-render
const { auth } = Route.useRouteContext();

// Works
const auth = useAuth();

// Only works on manual re-render
const { auth } = Route.useRouteContext();

// Works
const auth = useAuth();

Only the bottom example works without manual re-renders even though both consume the same provider.

function InnerApp() {
    const auth = useAuth();

    return (
        <RouterProvider router={router} context={{ auth }} />
    );
}

// Render the app
const rootElement = document.body;
if (rootElement) {
    const root = ReactDOM.createRoot(rootElement);
    root.render(
        <TanStackQueryProvider.Provider {...TanStackQueryProviderContext}>
            <AuthProvider>
                <InnerApp />
            </AuthProvider>
        </TanStackQueryProvider.Provider>,
    );
}

function InnerApp() {
    const auth = useAuth();

    return (
        <RouterProvider router={router} context={{ auth }} />
    );
}

// Render the app
const rootElement = document.body;
if (rootElement) {
    const root = ReactDOM.createRoot(rootElement);
    root.render(
        <TanStackQueryProvider.Provider {...TanStackQueryProviderContext}>
            <AuthProvider>
                <InnerApp />
            </AuthProvider>
        </TanStackQueryProvider.Provider>,
    );
}

Am I misunderstanding the purpose of RouteContext?

TanStack•3mo ago•

2 replies

constitutional-coral

Is Router Context dynamic?

react

I am working on auth in React Router and I am confused by if Route.useRouteContext can be used the same way as a standard React context.

When I use Route.useRouteContext like so:

// Only works on manual re-render
const { auth } = Route.useRouteContext();

// Works
const auth = useAuth();

// Only works on manual re-render
const { auth } = Route.useRouteContext();

// Works
const auth = useAuth();

Only the bottom example works without manual re-renders even though both consume the same provider.

function InnerApp() {
    const auth = useAuth();

    return (
        <RouterProvider router={router} context={{ auth }} />
    );
}

// Render the app
const rootElement = document.body;
if (rootElement) {
    const root = ReactDOM.createRoot(rootElement);
    root.render(
        <TanStackQueryProvider.Provider {...TanStackQueryProviderContext}>
            <AuthProvider>
                <InnerApp />
            </AuthProvider>
        </TanStackQueryProvider.Provider>,
    );
}

function InnerApp() {
    const auth = useAuth();

    return (
        <RouterProvider router={router} context={{ auth }} />
    );
}

// Render the app
const rootElement = document.body;
if (rootElement) {
    const root = ReactDOM.createRoot(rootElement);
    root.render(
        <TanStackQueryProvider.Provider {...TanStackQueryProviderContext}>
            <AuthProvider>
                <InnerApp />
            </AuthProvider>
        </TanStackQueryProvider.Provider>,
    );
}

Am I misunderstanding the purpose of RouteContext?

Is Router Context dynamic?

Similar Threads

Is Router Context dynamic?

Similar Threads

Similar Threads

Similar Threads