react-router-dom useHistory() 不工作答案

【问题标题】：react-router-dom useHistory() not workingreact-router-dom useHistory() 不工作
【发布时间】：2021-10-07 07:56:30
【问题描述】：

useHistory() 钩子在我的项目中不起作用。我在不同的组件中有它，但它们都不起作用。我正在使用“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>
      )
  }

【问题讨论】：

“不工作”是什么意思？是不是出错了？什么都没有发生？
什么都没有发生
dispatch 和 state set 怎么样，他们工作了吗？
是的，除了 history.push() 之外一切正常
那么我们需要查看更多代码。你能分享你在哪里初始化你的路由和调用history.push的其余组件吗？

标签： reactjs react-router-dom redux-thunk

【解决方案1】：

试试useNavigate，而不是useHistory：

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

【讨论】：

遗留代码呢？

【解决方案2】：

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

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

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

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

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

class Login extends Component {
  ....

  let navigate = useNavigate();

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

【讨论】：

【解决方案3】：

经过一番排查，发现react-router-dom版本^5.2.0有一个bug。请参阅 this 和 this 。我建议你将react-router-dom 版本降级为4.10.1

【讨论】：

不客气 :) 我很高兴现在一切正常！干杯！

【解决方案4】：

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

【讨论】：

这并不能真正回答问题。如果您有其他问题，可以点击进行提问。要在此问题有新答案时收到通知，您可以follow this question。一旦你有足够的reputation，你也可以add a bounty 来引起对这个问题的更多关注。 - From Review

【解决方案5】：

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

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

<componet methodTopass/>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。