Question

将数据传递给反应路线

2018-08-29

202

reactjs react-router

当从一个 React 路由转换到另一个路由时，我可以通过 URL 参数传递字符串

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

但是，如果我想传递更复杂的东西，例如深度嵌套的 JSON 对象，该怎么办？有没有办法将这些数据从一个路由传递到另一个路由 而不使用 Redux ？

所讨论的项目使用的是 React 14.4.2 和 React-router 4.3.1。

Answer 1

在路由之间传递复杂数据通常不是一个好主意。例如，当用户刷新路由上的页面时会发生什么？当页面重新加载时，所有应用状态以及您传递给路由的任何内容都将丢失。

根据经验，每个路由都应该能够仅使用 URL 中的信息（路径、路径参数或查询字符串）从头开始收集或刷新所需的所有数据。

如果这不太适合您的用例，请考虑应用的这一部分不需要自己的可收藏路由/URL，而您只是在实现暂时的 UI 更改，如果在页面刷新时丢失，也没关系。

Answer 2

Route 中传递参数的示例：

   <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

Answer 3

我认为可能的方法有：

1- 通过使用位置状态对象，我们可以将数据传递到其中，它将在新页面中可用。这种方法的问题是，在刷新新页面后，该数据将不可用。

像这样：

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

并通过以下方式在新页面中访问它： this.props.location.state

2- 使用 localStorage ，在导航到新页面之前将数据设置到 localStorage 中，然后在新页面中读取相同的数据。

像这样：

navigate() {

   localStorage.setItem('data', obj);

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

我建议使用第二种方法，在路由中传递大对象不是一个好主意。