react-router-dom useHistory() 不工作

Question

useHistory() 挂钩在我的项目中不起作用。我在不同的组件中都有它，但是 none 它们可以工作。我正在使用 "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('/')
}

并且在实际操作中也不起作用

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)
  }
}

这是我的 router.js 文件

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

经过一番调查，我发现 react-router-dom 版本 ^5.2.0 中存在错误。参见 this and this。我建议您将 react-router-dom 版本降级为 4.10.1

Answer 2

而不是 useHistory，试试 useNavigate:

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

Answer 3

有时，如果我们在对话框或模态中调用历史显示错误，请将方法传递给组件

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

<componet methodTopass/>

Answer 4

对于react router dom的版本小于6.^

您可以像您的代码所示那样使用 useHistory() 钩子

为最新版本react router dom大于6.^

您可以像这样使用 useNavigate() 钩子。不带道具也可以使用

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

class Login extends Component {
  ....

  let navigate = useNavigate();

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

Answer 5

我有同样的错误，我忘记了为按钮添加类型来工作功能。当我输入类型时，问题就解决了

Answer 6

在我看来，它不需要降级 react-router-dom，只需使用“useNavigate”挂钩而不是“useHistory”挂钩。例如，如果您还想将一些数据发送到您的仪表板页面，您可以这样使用它：

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");
    }
}

最后，如果您想在仪表板页面中使用发送的数据，您可以这样做：

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

export const Dashboard = () => {
    const location = useLocation();


    useEffect(() => {
        if (location.state.someData) {
            // "someData" is available here.
        }
    });

您可以参考这个迁移指南：https://reactrouter.com/docs/en/v6/upgrading/v5

react-router-dom useHistory() 不工作

react-router-dom useHistory() not working

reactjs

redux-thunk

react-router-dom