Subscribe to Route Changes

router.subscribe

router.subscribe

the best way to re-render a component when a route changes? I feel like I'm missing something, is there a simpler approach?

    const router = useRouter();
    const [matchedRouteIds, setMatchedRouteIds] = useState(
        router.state.matches.map((m) => m.id)
    );
    useEffect(() => {
        return router.subscribe("onResolved", () => {
            const newMatchedRouteIds = router.state.matches.map((m) => m.id);
            setMatchedRouteIds(newMatchedRouteIds);
        });
    }, [router]);
    const isUsersRouteActive = matchedRouteIds.includes(usersRoute.id);

    const router = useRouter();
    const [matchedRouteIds, setMatchedRouteIds] = useState(
        router.state.matches.map((m) => m.id)
    );
    useEffect(() => {
        return router.subscribe("onResolved", () => {
            const newMatchedRouteIds = router.state.matches.map((m) => m.id);
            setMatchedRouteIds(newMatchedRouteIds);
        });
    }, [router]);
    const isUsersRouteActive = matchedRouteIds.includes(usersRoute.id);

TanStack•3y ago•

1 reply

rubber-blue

Subscribe to Route Changes

router.subscribe

router.subscribe

the best way to re-render a component when a route changes? I feel like I'm missing something, is there a simpler approach?

    const router = useRouter();
    const [matchedRouteIds, setMatchedRouteIds] = useState(
        router.state.matches.map((m) => m.id)
    );
    useEffect(() => {
        return router.subscribe("onResolved", () => {
            const newMatchedRouteIds = router.state.matches.map((m) => m.id);
            setMatchedRouteIds(newMatchedRouteIds);
        });
    }, [router]);
    const isUsersRouteActive = matchedRouteIds.includes(usersRoute.id);

    const router = useRouter();
    const [matchedRouteIds, setMatchedRouteIds] = useState(
        router.state.matches.map((m) => m.id)
    );
    useEffect(() => {
        return router.subscribe("onResolved", () => {
            const newMatchedRouteIds = router.state.matches.map((m) => m.id);
            setMatchedRouteIds(newMatchedRouteIds);
        });
    }, [router]);
    const isUsersRouteActive = matchedRouteIds.includes(usersRoute.id);

Subscribe to Route Changes

Similar Threads

Subscribe to Route Changes

Similar Threads

Similar Threads

Similar Threads