在带有历史对象的反应路由器中传递道具答案

【问题标题】：passing props within react router with history object在带有历史对象的反应路由器中传递道具
【发布时间】：2017-12-19 13:44:50
【问题描述】：

import createBrowserHistory from 'history/
import appState from './AppState'

const customHistory = createBrowserHistory()
ReactDOM.render(
  <Router>
    <div>
      <Route path="/submit" component={Submit} history={history}/>
    </div>
  </Router>,
  document.getElementById('root')
);

注意：如果我像其他属性一样添加 appState； Submit组件中没有appState等属性，

如果我用这个；

<Route path="/submit" render={routeProps=> <Submit appState={appState}/> history={history}/>

appState 可以正常通过，但是这次历史对象丢失了，这样做的正确方法是什么？ appState 只是 mobx 类的实例。

已编辑：我找到了一个“奇怪”的解决方案。我把路由元素改成了这个；

 <Route path="/submit" render={routeProps=> <Submit appState={appState}/> history={history}/>

然后我可以通过this._reactInternalInstance._context.router.history.push('/home') 访问相同的历史对象在进行此更改之前，我可以将其用作this.props.history.push('/home')

如果我让它工作正常，但以这种方式获取这个历史对象很烦人

【问题讨论】：

您应该将history 对象传递给router，而不是route。如果我错了，请纠正我。
也许有共同点，但在这个示例中，我可以像“this.props.history.pushState('/previousPage')”一样使用它，所以我的问题不包括历史的机智使用跨度>
检查这个：stackoverflow.com/questions/43469071/…

标签： reactjs react-router-v4

【解决方案1】：

你做错了，我敢肯定。浏览器历史是一个单例对象，因此您可以从模块中导出它。看这里：

//history.js:
import createBrowserHistory from 'history/
export default createBrowserHistory();

//Submit.js
import history from "myapp/history"
export default class Submit extends React.Component {
   ...
}

//MyRouter.js
import Submit from './myapp/Submit'
import appState from './AppState'
ReactDOM.render(
  <Router>
    <div>
      <Route path="/submit" component={Submit}/>
    </div>
  </Router>,
  document.getElementById('root')
);

【讨论】：

是的，实际上我想使用 customHistory（createBrowserHistory 的实例），这就是这里的问题：D

【解决方案2】：

我觉得对，你最好把历史放在Router而不是Route。

请参阅下面的答案，这对我很有效。您仍然可以在此答案中使用history.push。有时history.push 没有重定向页面。如果您遇到这种情况，您可以输入location.href = location.href 刷新页面。

https://stackoverflow.com/a/42679052/7765396

【讨论】：

嗨，感谢您的回答，但正如我在评论部分提到的那样，我的问题在这里没有任何意义，