Как переправить пользователя при onClick на другую страницу сайта?

В React для перенаправления пользователя на другую страницу сайта можно использовать компонент "Redirect" из пакета "react-router-dom". Этот компонент предоставляет простой способ осуществления перенаправления при событии onClick.

Прежде всего, убедитесь, что у вас установлен пакет "react-router-dom" с помощью команды:

npm install react-router-dom

Затем импортируйте компонент "Redirect" в файле, где вы хотите осуществить перенаправление:

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

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      redirect: false
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ redirect: true });
  }

  render() {
    if (this.state.redirect) {
      return <Redirect to="/new-page" />;
    }

    return (
      <div>
        <button onClick={this.handleClick}>Перейти на другую страницу</button>
      </div>
    );
  }
}

В этом примере мы создаем компонент класса "MyComponent". В конструкторе компонента мы инициализируем его состояние, устанавливая значение "redirect" в "false". Мы также связываем функцию обработчика "handleClick" с контекстом компонента.

В функции обработчика "handleClick" мы обновляем состояние компонента, устанавливая значение "redirect" в "true". Когда состояние обновлено и значение "redirect" стало "true", компонент перерисовывается и вызывает перенаправление на указанный путь "/new-page" через компонент "Redirect".

В методе "render" компонента мы проверяем значение состояния "redirect". Если оно равно "true", то рендерится компонент "Redirect" с атрибутом "to" со значением "/new-page". При этом реакт-роутер автоматически обновит URL и отрендерит компонент, который соответствует данному пути.

Если значение состояния "redirect" равно "false", компонент рендерит кнопку, по клику на которую будет вызываться функция обработчика "handleClick".

Конечно, приведенный пример демонстрирует наиболее базовый сценарий перенаправления пользователя на другую страницу сайта при клике на кнопку. Если вы используете react-router, то есть и более сложные сценарии перенаправления, такие как перенаправление с передачей параметров или использование условий. Однако, принцип с использованием компонента "Redirect" остается тем же.