Question

在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 />方法时，它不起作用。除了重定向方法，还有其他选择吗？还是目前的解决方案有什么解决办法？谢谢。

Answer 1

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

<Redirect push to={path} />

More information here from the docs

使用<Redirect />时，React Router历史记录.goBack不起作用

1 个答案: