React - 如何通过 react-router v4 将道具从一页传递到另一页？答案

【问题标题】：React - How to pass props via react-router v4 from one page to another?React - 如何通过 react-router v4 将道具从一页传递到另一页？
【发布时间】：2018-07-03 16:30:57
【问题描述】：

我想使用 react 路由器而不是从父级传递道具到子级，而是从一个页面传递到另一个页面。我不确定它是否可能，但在这里找到了一些看起来可能的文章/帖子。根据阅读的内容，我的代码应该可以工作，但事实并非如此。有人可以帮忙吗？

index.jsx：

ReactDOM.render(<HashRouter><App /> </HashRouter>,document.getElementById('app'))

App.jsx：

class App extends React.Component {
  render (){
    return (
      <div>           
        <Switch history={browserHistory}>
          ...
          <Route exact path='/home/step1' component={Component1}/>
          <Route exact path='/home/step2' component={Component2}/>
        </Switch>
      </div>
    )
  }
}
...
import { Switch, Route, browserHistory} from 'react-router-dom'

我的 2 个组件

import { Link, browserHistory } from 'react-router-dom';
export default class Component1 extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      id: undefined
    }
    this.navigateToStep2=this.navigateToStep2.bind(this);
  }
  navigateToStep2(e){
    e.preventDefault();
    browserHistory.push({pathname: "/home/step2", state:{id: this.state.id}})
  }
}

import { Link, browserHistory } from 'react-router-dom';
export default class Component2 extends React.Component {

render(){
  return (
    <div>
      <h1>hello: {this.props.id}</h1>
    </div>
  )
}

我也尝试过的是：

this.context.router.push({
  pathname: '/home/step2',
  state: {providerId: this.state.providerId}
})

这不太好，但据我了解，因为路由器 4，我现在必须使用历史浏览器？

【问题讨论】：

如果你不喜欢使用像 Redux 这样的 store 解决方案，你可以使用 App 组件来保持你的路由所需的 props 状态，并将回调方法传递给 Component1和Component2 更新此类状态。

标签： reactjs react-router browser-history react-router-v4

【解决方案1】：

我不确定这是否是最佳答案，但我刚刚发现了如何做到这一点：

我没有推送任何内容，而是将其洞察我的链接到其他页面：

<Link to={{
     pathname: '/home/step2',
     state: { id: this.state.id }
     }}>GO
</Link>

然后查看我的其他页面，我可以轻松访问它：

<h1>{this.props.location.state.id}</h1>

我仍然想知道为什么在这里使用 browserHistory.push ... 可能有意义，所以如果有人知道，很高兴知道！

【讨论】：

【解决方案2】：

1) 但是这一行

<Switch history={browserHistory}>

你确定吗？应将历史记录提供给您的路由器上下文提供者（在您的情况下为 HashRouter）

2) 那么，这一行

browserHistory.push({pathname: "/home/step2", state:{id: this.state.id}})

但你肯定需要使用withRouter hoc/decorator 来访问当前的历史对象，否则它无法处理（我想）历史状态保存的上下文。或者只使用上面答案中提到的Link 组件

【讨论】：