将数据传递到反应路线

在路由之间传递复杂数据通常是个坏主意。例如,当用户刷新路由上的页面时会发生什么情况?当页面重新加载时,所有应用程序状态以及您传递到路由的任何内容都将丢失。

根据经验,每条路由都应该能够使用 只有 url中的信息(路径、路径参数或查询字符串)。

如果这不太适合你的用例,考虑一下你的应用程序的这一部分不需要它自己的可书签路由/url的可能性,你只需要实现一个临时的UI更改,如果它在页面刷新时丢失了就可以了。

路由中传递参数的示例:

   <Route path="/:id" component={Child} />

   const Child = ({ match }) => (
      <div>
        <h3>ID: {match.params.id}</h3>
      </div>
   );

请参考: https://reacttraining.com/react-router/web/example/url-params

我认为可能的方法是:

1个- 通过使用location state对象,我们可以将数据传递到其中,并且它将在新页面中可用。这种方法的问题是,刷新新页面后,数据将不可用。

这样地:

this.props.history.replace({
  pathname: `${this.props.match.url}/newRoute`,
  search: '?someData=someValue',
  state: {
    ....
  }
})

并通过以下方式访问新页面: this.props.location.state

2个- 使用 localStorage ,将数据设置为 本地存储 在导航到新页,然后在新页中读取相同数据之前。

这样地:

navigate() {

   localStorage.setItem('data', obj);

   this.props.history.replace({
      pathname: `${this.props.match.url}/newRoute`,
      search: '?someData=someValue',
    })
}

我建议使用第二种方法,在路线上通过大物体不是一个好主意。