react-router-dom useHistory（）不起作用

Question

The useHistory() hook is not working in my project. I have it in different components but none of them work. I am using "react-router-dom": "^5.2.0",

import {useHistory} from 'react-router-dom'

const history = useHistory()

const logout = () => {    
   toggleMenu()
   setUser(null)
   dispatch({type: 'LOGOUT'})
   history.push('/')
}

And also in action its not working

export const signin = (formdata, history, setError) => async (dispatch) => {
try {
    const {data} = await API.signIn(formdata)
    if(data.error){
        setError(data.message)
    }else{
        dispatch({type: SIGNIN, data})
        history.push('/dashboard')
    }

   } catch (error) {
    setError(error)
    console.log(error)
  }
}

Here is my router.js file

const Router = () => {
    const user = JSON.parse(localStorage.getItem('profile'))
    return (
       <BrowserRouter>
                <>
                    {user && <Navigation/>}
                    <Switch>
                        <Route path='/page-not-found' component={Auth}/>
                        <Route path='/' exact component={()=>((user && user.result) ? <Redirect to="/dasboard"/> : <Auth/>)} />
                        
                        <Route path='/dashboard' component={() => (user ? <Dashboard/> : <Redirect to='/'/>)} />
                        <Route path='/books-purchase' component={() => (user ? <BooksPage/> : <Redirect to='/' />)} />
                    
                    </Switch>
                </>
            
        </BrowserRouter>
      )
  }

Answer 1

• For the version of react router dom less than 6.^

You can use useHistory() hook like your code is showing

• For the latest version of react router dom greater than 6.^

You can use useNavigate() hook like this. You can also use without props

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

class Login extends Component {
  ....

  let navigate = useNavigate();

      navigate('/');
    
    .....

Answer 2

After some investigation, I found that there is a bug in react-router-dom version ^5.2.0 . See this and this . I would suggest you to downgrade react-router-dom version to 4.10.1

Answer 3

而不是useHistory ，尝试useNavigate ：

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

Answer 4

In my point of view, It doesn't need to downgrade react-router-dom , just use "useNavigate" hook instead of "useHistory" hook. For example if you also want to send some data to your dashboard page, you can use it like so:

 import { useNavigate } from 'react-router-dom' const FunctionalComponent = () => { const navigate = useNavigate(); const TestHandler = (someData) => { navigate("/dashboard", {state: {someData: someData}}); //and if you don't want to send any data use like so: //navigate("/dashboard"); } }

Finally, if you want to use that sent data for example in your dashboard page, you can do it like so:

 import { useLocation } from 'react-router-dom' export const Dashboard = () => { const location = useLocation(); useEffect(() => { if (location.state.someData) { // "someData" is available here. } });

You can refer to this migration guide: https://reactrouter.com/docs/en/v6/upgrading/v5

Answer 5

i have same error, I forgot add type to button that working function. when i give type,problem was solved

Answer 6

If useNavigate not working, react-router-dom verison is older then v6 use useHistory

App.js

import React from 'react'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import AuthGuard from "./Routes/AuthGuard";

function App() {
  return (
    <div className='App'>
        <Router>
          <Routes>
              <Route path='/' element={<Home />} />
              <Route path='/contact' element={<Contact />} />
              <Route path='/guest-page' element={<AuthGuard isGuest={true}><h1>Guest Page</h1></AuthGuard>} />
              <Route path='/protected-page' element={<AuthGuard requireToken={true}><h1>ProtectedPage</h1></AuthGuard>} />
          </Routes>
        </Router>
    </div>
  );
}

export default App;

AuthGuard.js

import { Route, useNavigate } from "react-router-dom";
import { useLayoutEffect } from "react";

const ProtectedRoute = ({requireToken, guest, children, ...rest}) => {
    
    console.log(requireToken, guest, children, rest); 
    
    const navigate = useNavigate();
    const hasToken = false;

    let hasAccess = (!requireToken || (requireToken && hasToken));
    let navigateTo = '/?login-rquired=true'; 

    if(guest) {
        hasAccess = !hasToken; 
        navigateTo = '/?guest=true';
        console.log("Guest > hasAccess: " + hasAccess)
    }

    if(requireToken){
        console.log("requireToken", requireToken)
    }
    
    useLayoutEffect(()=>{
        if (!hasAccess) {
            console.log("Not allowed");
            navigate(navigateTo);
        }
    },[])

    return (
        <>{ hasAccess ? children : "Login required" }</>
    )
}

export default ProtectedRoute;

Answer 7

Sometimes, if we call history in dialog or modal it shows error, pass the method to components

const methodTopass= () => {
    history.push("/route");
};

<componet methodTopass/>

Answer 8

left "react-router-dom": "^5.2.0",
add "history": "4.10.1", in to package.json
then use import { createBrowserHistory } from "history";
and
let hist = createBrowserHistory();
hist.push("/domoy");