TanStackT
TanStack•2y ago•
4 replies
ordinary-sapphire

Can't modify router context from within a component

I don't know if this is intentional or not but I cannot modify context from within a component

App.tsx 
const router = createRouter({
  routeTree,
  context: {
    user: null,
    darkMode: false,
    setDarkMode: () => {}
  }
});

export default function App() {
  const [user, setUser] = useState<User | null>(null);
  const [darkMode, setDarkMode] = useState<boolean>(false);

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(user => setUser(user));
    return () => unsubscribe();
  }, []);

  return <RouterProvider router={router} context={{ user, darkMode, setDarkMode }} />;
}


index.tsx
function Page() {
  const { darkMode, setDarkMode } = Route.useRouteContext();

  return (
    <>
      <h1>Theme is {darkMode ? "dark" : "light"}</h1>
      <button onClick={() => setDarkMode(!darkMode)}>Toggle</button>
    </>
  );
}


Even when I click the button the darkMode remains the same (i.e false)
Was this page helpful?