Как сделать на реакте, чтобы при нажатии на ссылку открывалась новая страница моего сайта?

В React для создания ссылок и переходов на другие страницы традиционно используется React Router. Он предоставляет удобный интерфейс для управления маршрутизацией веб-приложения.

Прежде всего, вам нужно установить React Router в свой проект, используя команду npm или yarn:

npm install react-router-dom

После установки React Router вы можете начать использовать его для создания ссылок, открывающих новые страницы вашего сайта.

1. В вашем компоненте App.js, где обычно находится маршрутизация в React, добавьте следующие импорты:

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

2. Затем оберните свой компонент внутри <Router>, чтобы обеспечить маршрутизацию:

function App() {
  return (
    <Router>
      {/* Ваш код компонентов и маршрутизации */}
    </Router>
  );
}

3. Теперь вы можете использовать компонент <Link> для создания ссылок, которые будут открывать новые страницы вашего сайта. Например:

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Главная</Link>
          </li>
          <li>
            <Link to="/about">О нас</Link>
          </li>
          <li>
            <Link to="/contact">Контакты</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route path="/about">
          <AboutPage />
        </Route>
        <Route path="/contact">
          <ContactPage />
        </Route>
        <Route path="/">
          <HomePage />
        </Route>
      </Switch>
    </Router>
  );
}

В приведенном выше примере компонент <Link> используется для создания ссылок на главную страницу ("/"), страницу "О нас" ("/about") и страницу "Контакты" ("/contact"). Когда пользователь нажимает на ссылку, React Router автоматически обновляет URL и отображает соответствующий компонент для этого маршрута.

4. Далее вам нужно создать компоненты HomePage, AboutPage и ContactPage.

function HomePage() {
  return <h1>Главная страница</h1>;
}

function AboutPage() {
  return <h1>О нас</h1>;
}

function ContactPage() {
  return <h1>Контакты</h1>;
}

Каждый из этих компонентов будет отображаться, когда пользователь переходит по соответствующему пути. Например, когда пользователь переходит по "/about", отображается компонент AboutPage.

Теперь, при нажатии на ссылку, React Router автоматически обработает переход на новую страницу вашего сайта и отрендерит соответствующий компонент. Вы можете добавить дополнительные маршруты и компоненты по мере необходимости.

Это основной пример использования React Router для создания ссылок и перехода на новые страницы вашего сайта в React. У React Router есть множество других возможностей, таких как передача параметров и использование вложенных маршрутов, которые позволяют более сложную маршрутизацию в ваших приложениях React.