使用历史对象在反应路由器中传递道具

Question

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；提交组件中没有appState之类的属性，

如果我用这个；

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

appState传递很好，但这次缺少历史对象，正确的方法是什么？appState只是mobx类实例。

编辑：我找到了一个“奇怪”的解决方案。我将route元素更改为此；

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

然后，我可以通过this.\u reactInternalInstance.\u context.router.history.push（'/home'）访问相同的历史对象在进行此更改之前，我可以将其用作this.props.history.push（'/home'）

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

Answer 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')
);

Answer 2

我认为这是对的，你最好把历史放在路由器而不是路线上。

请看下面的回答，这个对我很有效。您仍然可以在这个答案中使用history.push。有时history.push没有重定向页面，如果这种情况发生在你身上，你可以把location.href=location.href刷新页面。

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