score:405

Accepted answer

In react-router-dom v6 useHistory() is replaced by useNavigate().

You can use:

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/home');

score:0

react-router-dom v5 useHistory, but in v6 you should use useNavigate hook

Usage:

import { useNavigate } from "react-router-dom";

function SignupForm() {
  let navigate = useNavigate();

  async function handleSubmit(event) {
    event.preventDefault();
    await submitForm(event.target);
    navigate("../success", { replace: true });
  }

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;

score:0

In react-router-dom v6 useHistory() function is replaced by useNavigate().

const navigate = useNavigate();

navigate("/login")

score:3

If you must stick to the latest react-router-dom v6.0.0, then replace useHistory with useNavigate. Else, downgrade your react-router-dom to v5.2.0 and your code works as it should.

score:5

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

const confirm = (e) => {
    navigate.push('/')
}

score:7

useHistory is replace by useNavigate in v6.

Just replace useHistory name to useNavigate, or follow these 3 simple steps.

  1. import { useNavigate } from 'react-router-dom' ; on the top of your file.

  2. const navigate = useNavigate(); define in your function.

  3. navigate("/path_name"); redirect to your path.

score:10

I upgraded the version of react-router-dom to

5.2.0

and it is working now.

score:15

None of the answers actually mention how to replicate the methods which used to be available from the v5 useHistory hook but which are no longer available in v6 e.g. goBack, goForward, go. The following example is taken from the migration guide:

React Router v5 app using methods from useHistory hook:

// This is a React Router v5 app
import { useHistory } from "react-router-dom";

function App() {
  const { go, goBack, goForward } = useHistory();

  return (
    <>
      <button onClick={() => go(-2)}>
        Go 2 pages back
      </button>
      <button onClick={goBack}>Go back</button>
      <button onClick={goForward}>Go forward</button>
      <button onClick={() => go(2)}>
        Go 2 pages forward
      </button>
    </>
  );
}

Here is the equivalent app with v6 using navigate method from useNavigate hook:

// This is a React Router v6 app
import { useNavigate } from "react-router-dom";

function App() {
  const navigate = useNavigate();

  return (
    <>
      <button onClick={() => navigate(-2)}>
        Go 2 pages back
      </button>
      <button onClick={() => navigate(-1)}>Go back</button>
      <button onClick={() => navigate(1)}>
        Go forward
      </button>
      <button onClick={() => navigate(2)}>
        Go 2 pages forward
      </button>
    </>
  );
}

score:67

Replace useHistory with useNavigate then

const navigate = useNavigate();

and then replace history.push('/path') with navigate('/path')

Change history.replace('/path') with navigate('/path', { replace: true })

Want to use state in push/navigate do navigate('/path', { state: { name:'Xyz' }})


Related Query

More Query from same tag