Question

从一种反应路线过渡到另一种反应路线时，我可以通过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',
    })
}

我建议使用第二种方法，这不是在路线中传递大物体的好主意。

传递数据以响应路线

3 个答案: