React-router-dom useHistory() 不起作用

Question

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

Answer 1

• 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 2

在我看来，不需要降级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

Answer 3

而不是useHistory，尝试useNavigate：

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

Answer 4

react-router-dom经过一番调查，我发现版本有一个bug ^5.2.0。看看这个和这个。我建议你将react-router-dom版本降级到4.10.1