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

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； Submit组件中没有属性如appState，

如果我用这个；

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

appState 正常通过，但这次缺少历史对象，正确的做法是什么？ appState 只是 mobx class 实例。

已编辑：我找到了 "weird" 解决方案。我将路线元素更改为此；

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

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

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

Answer 1

我认为是对的，你最好把历史放在Router而不是Route。

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

Answer 2

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

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

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

passing props within react router with history object

reactjs

react-router-v4