reactjs 如何将一个页面重定向到另一个页面？

Question

应用程序.js

这是事件处理按钮单击：

 this.handleClick = this.handleClick.bind(this);

handleClick(e) {
    debugger;
    e.preventDefault();
    this.context.router.history.push('/HomePage');
  }

<button onClick={this.handleClick}>Navigate </button>

TypeError：无法读取未定义的属性“历史”

我安装了这个使用： npm install prop-types --save

它不工作。

原文由 Allen Bert 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要验证为什么不工作，你可以 console.log() 你的道具，你会看到 history 不会出现，那么你怎么能解决这个问题？好吧，这很容易，您有两种方法：

withRouter HOC

使用 withRouter 您可以通过 withRouter 高阶组件访问历史对象的属性和最接近的匹配项。 withRouter 无论何时呈现，都会将更新的匹配、位置和历史道具传递给包装的组件。

 props.history.push('/path')

例子：

 import React from 'react';
import {withRouter} from 'react-router-dom';

function App({ history }) {
  return (
    <div>
      <button onClick={() => history.push('/signup')}>
        Signup
      </button>
    </div>
  );
}

export default withRouter(App)

<Redirect /> 组件

呈现 <Redirect> 将导航到新位置。新位置将覆盖历史堆栈中的当前位置，就像服务器端重定向 (HTTP 3xx) 一样。

例子：

 import React from 'react';
import {Redirect} from 'react-router-dom';

class Register extends React.Component {
  state = { toDashboard: false }

  handleSubmit = (user) => {
    saveUser(user).then(() => this.setState(() => ({ toDashboard: true })));
  }

  render() {
    if (this.state.toDashboard) {
      return <Redirect to='/dashboard' />
    }

    return (
      <div>
        <h1>Register</h1>
        <Form onSubmit={this.handleSubmit} />
      </div>
    )
  }
}

我希望这对你们有所帮助！

原文由 Abraham 发布，翻译遵循 CC BY-SA 4.0 许可协议