Update context from a component

[edishu]

Is there a way to update value of context from within a component? So the API should look like:

import { createFileRoute, Outlet } from '@tanstack/react-router';
import { useEffect } from 'react';

export const Route = createFileRoute(
  '/some/_layout'
)({
  component: () => <Layout />,
});

const Layout = () => {
  const updateContext = Route.useRouteContextUpdate(); // there is no `useRouteContextUpdate`, which I want
  const { data } = useFetchData();

  useEffect(() => {
    updateContext({ breadcrumb: data.text });
  }, [data, updateContext]);

  return <Outlet />;
};

This API will provide a lot of flexibility in updating context based on any sync/async logic from a component.

[polyrenn]

What you need is <RouterContextProvider>
Pass in the updated context value through the context prop and invalidate to compute the new context.
As so:

function App() {
  const networkStrength = useNetworkStrength()
  // Inject the returned value from the hook into the router context
  return <RouterContextProvider router={router} context={{ networkStrength }} />
}