reactjs - 如何在react中点击onClick转到另一个页面

Question

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

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当您尝试直接调用页面时，页面会直接在浏览器级别呈现

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