如何在反应中转到另一个页面onClick

Question

我是新手，当用户单击按钮时，我正在尝试加载另一个页面。我已经使用了 window.location 但是当我单击按钮时没有任何反应。如何解决这个问题？

这是我包含我的 onClick 的地方

<div>
  <img className="menu_icons" src={myhome}/>
  <label className="menu_items" onClick={home}>Home</label>
</div>

为 onClick 编写的函数

function home(e) {
    e.preventDefault();
    window.location = 'my-app/src/Containers/HomePage.jsx';
}

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

Answer 1

如果你真的想构建一个应用程序，我建议使用 React Router 。否则你可以只使用普通的 Javascript：

根据您想要的愿望，有两种主要方法：

1. 样式 <a> 作为您的按钮
2. 使用 <button> 并以编程方式重定向

因为根据您的问题，我的假设是您没有构建单页应用程序并使用 React 路由器中的某些东西。并特别提到了使用 button 下面是一个示例代码

var Component = React.createClass({
  getInitialState: function() { return {query: ''} },
  queryChange: function(evt) {
    this.setState({query: evt.target.value});
  },
  handleSearch: function() {
    window.location.assign('/search/'+this.state.query+'/some-action');
  },
  render: function() {
    return (
      <div className="component-wrapper">
        <input type="text" value={this.state.query} />
        <button onClick={this.handleSearch()} className="button">
          Search
        </button>
      </div>
    );
  }
});

根据你的帖子我看到的错误

1. 在渲染方法中未正确调用使用 window.location 的函数
2. 您可以使用 window.location.assign() 有助于加载新文档的方法
3. 我怀疑 JSX 页面在您尝试直接调用它们时直接在浏览器级别呈现

希望这会有所帮助，如果没有，你想出一个答案，请分享

原文由 Keshan Nageswaran 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您需要在组件的构造函数中绑定处理程序，否则 React 将无法找到您的 home 函数。

 constructor(props) {
  super(props);
  this.home = this.home.bind(this);
}

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