如何使用 react-router-dom 使用 back button/Link click 返回上一页

Question

我正在使用 React 15.6 和 react-router 4

我在应用程序 A、B、form1、form2、C 中有 5 个页面。form1 和 form2 有 BACK 和 NEXT 按钮。这是导航流程-

(A/B) --> form1 --> form2 --> C.

用户可以从 A 或 B 进入 form1。

我的问题是 - 如果用户从 A 转到 form1，然后转到 form2，那么在返回到之前的页面时，用户如何在单击 form1 上的“后退”按钮时再次转到 A。

如果只有 A 那么我们可以使用

<Link to="path/to/A"/>

在 form1 上单击返回按钮。

但是如果我们同时拥有 A 和 B 作为可能的路径，那么我们无法确定用户是从 A 还是 B 来到 form1。

可以帮助我们如何在这种情况下管理以前的路径状态。

Answer 1

我相信您的情况与身份验证示例非常相似，您必须记住用户来自的页面 https://reacttraining.com/react-router/web/example/auth-workflow

在您的页面 A 和页面 B 中，您可以添加一个 link，其中

<Link 
  to={{ 
    pathname: '/form1',
    state: { from: props.location } // or '/A' or '/B'
  }}
/>

在 Form1 中，您需要访问 location，因此您可能需要使用 withRouter

<Link to={props.location.state.from}>
  Back
</Link>

如果您需要转到 Form2 并且仍然记得这条路径，那么您可能应该继续传递状态

How to go back to previous page using back button/Link click using react-router-dom