UseHistory
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/home');
Motionless Mole
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/home');import { useHistory } from 'react-router-dom';
function Home() {
const history = useHistory();
return <button onClick={() => history.push('/profile')}>Profile</button>;
}import { useHistory } from "react-router-dom"; // DEPRECATED
// It is now
import { useNavigate } from "react-router-dom"; // As at March 3, 2022In react-router-dom version 6
useHistory() is replaced by useNavigate() ;
import {useNavigate} from 'react-router-dom';
const navigate = useNavigate();
navigate('/home')import { useLocation } from 'react-router-dom'
// Location is, for example: http://localhost:3000/users/new
// Care! MyComponent must be inside Router to work
const MyComponent = () => {
const location = useLocation()
// location.pathname is '/users/new'
return <span>Path is: {location.pathname}</span>
}
export default MyComponent// useHistory() does not work inside an arrow function
// notice @ line 9 that the history.push() is inside a usual function. not an arrow function
let myComponent = () => {
const history = useHistory();
function routeChange(){
history.push("/author");
}
return(<>
<button onClick={ routeChange} > redirect </button>
</>)
}