使用 HashRouter 以编程方式导航

Question

我最初使用 react-router 中的 hashHistory 并使用 this.props.history.push() 以编程方式导航我的 React 应用程序。但是随着 react-router-dom 包中的 HashRouter 的使用，this.props.history.push() 现在会抛出 Cannot read property 'push' of undefined 错误。

现在如何使用 HashRouter 以编程方式导航？

ReactDOM.render(
  <Provider store={store}>
    <MuiThemeProvider>
      <HashRouter>
        <div>
          <Route exact path="/" component={App} />
          <Route path="/landing" component={Landing} />
        </div>
      </HashRouter>
    </MuiThemeProvider>
  </Provider>,
document.getElementById('root'));

App.js

的渲染函数

render() {
  return (
    <div className="App">
      ...
      <div>
        <Collapse isOpened={this.state.activeForm === 1}>
          <SignUpForm />
        </Collapse>
        <Collapse isOpened={this.state.activeForm === 2}>
          <SignInForm />
        </Collapse>
      ...
    </div>
  );
}

SignUpForm.js 中调用 .push()

的函数

handleSubmit(e) {
  ...
  this.props.history.push('/landing');
  ...
}

Answer 1

我知道我的问题是什么了。我的 index.js 是这样设置的（如下） App.js 作为路线之一，not SignUpForm.js，这是在App.js中渲染的容器。这意味着 SignUpForm.js 没有 App.js[=26= 中的 history prop 的概念].

通过将 App.js 的历史道具作为道具传递给 SignUpForm.js，我能够在 SignUpForm.js 内调用 this.props.history.push() 以获得我想要的操作。

Answer 2

如果您的组件是从路由（如 App 和 Landing）渲染的，那么您将可以访问所有与路由相关的道具（match、history、location）。但是，由于 SignUpForm 未使用路由呈现，因此默认情况下您将无法访问这些道具。

但我们可以使用 withRoute higher-order component 显式获取这些道具。我们只需要在导出之前用这个 HoC 包装组件，如下所示。

export default withRouter(SignUpForm);

现在它将按预期工作，因为 SignUpForm 获得 history prop.

使用 HashRouter 以编程方式导航

Programmatically Navigate w/ HashRouter

reactjs

react-router

react-router-v4

react-router-dom