Как перейти на другую страницу onClick в react

Я новичок реагировать и я пытаюсь загрузить другую страницу, когда пользователь нажимает кнопку. Я использовал окно.расположение, но ничего не происходит когда я нажимаю кнопку. Как это исправить?

Это, где я включил свой 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';
}
6
navigation react-router reactjs

3 ответов

если вы действительно хотите создать одно приложение, я бы предложил использовать Реагировать-Маршрутизатор. В противном случае вы можете просто использовать простой 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 страницы отображаются непосредственно на уровне браузера при попытке вызвать их прямо

надеюсь, это поможет, если нет, и вы выясните ответ, пожалуйста, поделитесь

8

вам нужно привязать обработчик в конструкторе вашего компонента, иначе React не сможет найти ваш

6

вам нужно ссылаться на метод, используя this, иначе React не найдет его.

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