React - 如何通過 react-router v4 從一個頁面到另一個頁面傳遞道具？

Question

我想使用反應路由器將道具不是從父級傳遞到子級，而是從一頁傳遞到另一頁。 我不確定它是否可能，但在這里找到了一些似乎可能的文章/帖子。 根據閱讀的內容，我的代碼應該可以工作，但事實並非如此。 有人可以幫忙嗎？

索引.jsx：

ReactDOM.render(<HashRouter><App /> </HashRouter>,document.getElementById('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，我現在必須使用歷史瀏覽器嗎？

Answer 1

我不確定這是否是最好的答案，但我剛剛發現了如何去做：

而不是推送任何東西，我只是把它洞察我的鏈接到另一個頁面：

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

然后洞察我的另一個頁面，我可以輕松訪問它：

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

我仍然想知道為什么使用 browserHistory.push ......在這里可能有意義，所以如果有人知道，很高興知道！

Answer 2

1）但是這條線

<Switch history={browserHistory}>

你確定嗎？ 歷史記錄應提供給您的路由器上下文提供程序（在您的情況下為 HashRouter）

2）然后，這一行

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

但是您肯定需要使用withRouter hoc/decorator 來訪問當前歷史對象，否則它無法處理（我想）保留歷史狀態的上下文。 或者只使用上面答案中提到的Link組件