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

Question

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

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

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

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

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

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

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

在form1上单击后退按钮.

但是如果我们将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并仍然记住这条路径,那么您可能应该继续传递状态