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

В React для перехода на другую страницу нужно использовать роутер. Роутер - это компонент, который позволяет определить пути и соотнести их с соответствующими компонентами.

Для использования роутера в React нужно установить библиотеку react-router-dom и импортировать необходимые компоненты.

Пример:

• Установка библиотеки:

npm install react-router-dom

• Импорт компонентов:

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

• Использование компонентов:

function App() {
  return (
    <Router>
      <div>
        <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'>
            <About />
          </Route>
          <Route path='/contact'>
            <Contact />
          </Route>
          <Route path='/'>
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

В данном примере мы создали компонент App, в котором определили роутер. Далее мы создали навигационную панель с тремя ссылками на страницы "Главная", "О нас" и "Контакты". При клике на ссылку происходит переход на соответствующую страницу.

Для каждой страницы мы определили отдельный компонент (Home, About, Contact) и указали путь к ним в роутере.

• Определение компонентов:

function Home() {
  return <h2>Добро пожаловать на главную страницу</h2>;
}

function About() {
  return <h2>О нас</h2>;
}

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

В данном примере мы определили три компонента: Home, About, Contact. Каждый компонент возвращает простой текст, который будет отображаться на соответствующей странице.

Таким образом, при переходе на страницу "О нас" будет отображаться текст "О нас", при переходе на страницу "Контакты" - "Контакты" и т.д.

• Дополнительные возможности:

Роутер react-router-dom предоставляет дополнительные возможности, такие как передача параметров в URL, использование вложенных маршрутов, обработка ошибок и т.д. Более подробную информацию об этих возможностях можно найти в официальной документации react-router-dom.