使用历史记录对象

时间:2017-07-14 12:42:02

标签: reactjs react-router-v4

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 path="/submit" render={routeProps=> <Submit appState={appState}/> history={history}/>

然后我可以通过this._reactInternalInstance._context.router.history.push('/home')访问同一个历史记录对象 在我做出此更改之前,我可以将其用作this.props.history.push('/home')

如果我离开这个,因为它工作正常,但很烦人用这种方式获取这个历史对象

2 个答案:

答案 0 :(得分:2)

我认为这是正确的,最好将历史记录放在路由器而非路由中。

见下面的答案,这个对我有用。您仍然可以在此答案中使用history.push。有时history.push没有重定向页面。如果发生这种情况,您可以放location.href = location.href刷新页面。

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

答案 1 :(得分: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')
);