时间戳

首页 > 解决方案 > React Router history.goBack 在使用时不起作用

javascript - React Router history.goBack 在使用时不起作用

问题描述

在一个React应用程序中，我Router这样使用：

let path='/';
if(condition){
   path='/dashboard'
}else if(condition){
   path='/login'
}

<Router>
 <Redirect to={path} />
   <Switch>
      <Route path="/dashboard"><Dashboard /></Route>
      <Route path="/login"><Login /></Route>
    </Switch>
</Router>

这工作正常。但我想Back Button在每个页面中实现一个沿着页面移动。我这样做：

// The login.jsx component
function Post(props) {
  return (
    <div>
      <button type="button" onClick={() => props.history.goBack()}>
        Go back
      </button>
    </div>
  );
}

但我得到这个错误：

Uncaught TypeError: Cannot read property 'goBack' of undefined

然后我采用另一种方法。我使用useHistory：

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
  Link,
  useHistory,
} from "react-router-dom";

// The login.jsx component
function Post(props) {
  let history = useHistory();
  
  return (
    <div>
      <button type="button" onClick={() => history.goBack()}>
        Go back
      </button>
    </div>
  );
}

而这一次，当我点击Go Back按钮时，什么也没有发生！

如果我使用它执行此程序，<Link/>则效果很好。但是当我使用<Redirect />方法时，它不起作用。我的重定向方法有什么替代方法吗？还是有针对当前方法的解决方案？谢谢。

标签： javascriptreactjsreact-routerreact-router-dom

解决方案

对于要包含在历史记录中的重定向，请使用push

<Redirect push to={path} />

来自文档的更多信息

推荐阅读