如何转到React中的另一页

Question

我是新手反应，当用户单击按钮时，我正在尝试加载另一个页面。我已经使用了窗口。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';
}

Answer 1

如果您真的想构建一个我建议使用React路由器的单个应用程序。否则，您可以使用普通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页面直接呈现在浏览器级别

希望这会有所帮助，如果没有，您会找到答案，请分享

Answer 2

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

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

Answer 3

您需要使用this引用该方法，否则React找不到它。

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