router.navigate has been removed

Hey

Will

router.navigate

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

TanStack•3y ago•

8 replies

verbal-lime

router.navigate has been removed

Hey

Will

router.navigate

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

router.navigate has been removed

Similar Threads

router.navigate has been removed

Similar Threads

Similar Threads

Similar Threads