javascript - 使用React Router进行导航时保存数据(Saving data in from when navigating using react routers)

Question

I'm trying to create multiple pages with forms.

(我正在尝试使用表单创建多个页面。)

When I navigate from one page to another, I want the data that was filled by the user to be saved automatically (lets says, in the state of that component).

(当我从一页导航到另一页时，我希望用户填充的数据自动保存（让我们说，处于该组件的状态）。)

Note the user has not submitted anything yet, nor there is any save button to fire any function.

(请注意，用户尚未提交任何内容，也没有任何保存按钮可触发任何功能。)

The user has simply jumped from one page with form components(eg: ) to another page with other form components using react routers... And I want whatever the user entered saved automatically.

(用户使用react routers只是简单地从具有表单组件（例如）的页面跳转到具有其他表单组件的另一页面...而且我希望用户输入的内容自动保存。)

Can that be done?

(能做到吗)

When the user goes back to the previous page, the user can pick up where he left off?

(当用户返回上一页时，用户可以从上次停止的地方接听？)

So in this example, when the user goes back to the previous page(using react routers) the component did not reset or refresh itself, and whatever was entered;

(因此，在此示例中，当用户返回上一页（使用React路由器）时，组件未重置或刷新自身，也没有输入任何内容。)

the user would not have to enter again, hence picking up where he left off.

(用户将不必再次输入，因此可以在他离开的地方接机。)

There were talk about using iframes, but I'm not sure about that.

(有人在谈论使用iframe，但是我不确定。)

Of course all this eventually will go to the redux store.

(当然，所有这些最终都将转到redux商店。)

But I'm trying to solve the “saved” state of these form even after navigating to other components/pages using react routers

(但是即使在使用React Router导航到其他组件/页面之后，我仍试图解决这些表单的“保存”状态)

  ask by adnan tariq translate from so

Answer 1

For that, you can take a look at redux .

(为此，您可以看一下redux 。)

If you don't want to use redux i will link my answer that uses react-router =>

(如果您不想使用redux，我将链接我的使用react-router =>的答案)

With react-router, you can transfer "state"

(使用react-router，您可以传输“状态”)

this.props.history.push({
  pathname: '/ShowRecommendation',
  state: { taskid: Task_id }
})

and at the ShowRecommendation.js componenet you can get the value using

(在ShowRecommendation.js组件上，您可以使用)

console.log(this.props.location.state)

can we pass a value when we move to next component using this.props.history.push("/next Component")?

(使用this.props.history.push（“ / next Component”）移到下一个组件时，我们可以传递值吗？)