如何使用返回按钮返回上一页/使用react-router-dom链接点击

Question

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

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

  

（A / B） - ＆gt; form1 - ＆gt; form2 - ＆gt;下进行。

用户可以从A或B来到form1。

我的问题是 - 如果用户从A到form1然后再到form2，那么在返回上一页时，用户如何在form1上单击BACK按钮再次转到A.

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

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

在form1 BACK按钮上单击。

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

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

Answer 1

我相信您的情况与auth示例非常相似，您需要记住用户来自的页面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并仍然记住这条路径，那么您可能应该继续沿着状态传递