reactjs - 如何使用后退按钮返回上一页/使用react-router-dom单击链接

Question

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

我在应用程序 A、B、form1、form2、C 中有 5 个页面。form1 和 form2 有“后退”和“下一步”按钮。 这是导航流程 -

(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 
  to={{ 
    pathname: '/form1',
    state: { from: props.location } // or '/A' or '/B'
  }}
/>

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

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

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