variable-lime

router.navigate has been removed

Hey 👋🏽 Will router.navigate come back, or is this option to navigate no longer available? will something like this be possible?

import { router } from "@/routes/router";

const goToPage = ({ number }) => {
  router.navigate({
    search: (prev) => {
      return { ...prev, page: number };
    },
  });
};

const queryActions = {
  goToPage,
  // ...
};

export const useQueryActions = () => queryActions;

import { router } from "@/routes/router";

const goToPage = ({ number }) => {
  router.navigate({
    search: (prev) => {
      return { ...prev, page: number };
    },
  });
};

const queryActions = {
  goToPage,
  // ...
};

export const useQueryActions = () => queryActions;

Or is this advisable?

import { useNavigate } from "@tanstack/react-router";

export const useQueryActions = () => {
  const navigate = useNavigate({ from: "/participants" });

  const goToPage = ({ number }) => {
    navigate({
      search: (prev) => {
        return { ...prev, page: number };
      },
    });
  };

  return {
    goToPage,
  };
};

import { useNavigate } from "@tanstack/react-router";

export const useQueryActions = () => {
  const navigate = useNavigate({ from: "/participants" });

  const goToPage = ({ number }) => {
    navigate({
      search: (prev) => {
        return { ...prev, page: number };
      },
    });
  };

  return {
    goToPage,
  };
};

Thanks

8 Replies

fair-rose•3y ago

The router returned from from new Router({ /** */ }), no longer contains any of that functionality. I believe this is due to all these functions being moved inside of the React context. However, router.navigate still exists on the useRouter hook. Also, if you want to use some navigation-based functionality from within the load or beforeLoad functions, then you can use the navigate function which is passed into the parameters of the previously mentioned functions. This navigate function is unfortunately not typed due to circular imports. Rather you can wrap it in the typedNavigate helper to add back the type-safety.

variable-limeOP•3y ago

Thank you. Okay, that's a shame. With the above 1st attempt you could avoid useCallbacks. How do you implement searchParams-changes?

xenial-black•3y ago

@Sean Cassiere Are you able to provide an example of how you would use typedNavigate?

fair-rose•3y ago

router.navigate still exists on the useRouter hook. So router.navigate({ to: '/', search: (search) => ({...search: foo: 'bar' }) }) still works. Just not taking it from the router config.

fair-rose•3y ago

I haven't pushed to github yet, but this is what it looks like.

useful-bronze•3y ago

path.replace(/\/\?/, "?").replace(/\/$/, "")

fair-rose•3y ago

This is what happens when my dumbass doesn't know regex and stumbles along with Copilot

useful-bronze•3y ago

https://regex101.com/

Gaming

Programming

router.navigate has been removed

Did you find this page helpful?