React Router

Вот как установить и настроить React Router, а также создать маршруты и навигационные ссылки.

Установка React Router:

Вы можете установить React Router с помощью npm или yarn:

npm install react-router-dom
# или
yarn add react-router-dom

Настройка React Router:

Обычно вы будете оборачивать ваше приложение в BrowserRouter в корневом файле вашего приложения.

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

const Root = () => (
  <Router>
    <App />
  </Router>
);

export default Root;

Создание маршрутов и навигационных ссылок:

В компонентах, которые вы хотите сделать доступными по разным URL, используйте компоненты Route.

// App.js
import React from 'react';
import { Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => (
  <div>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>

    <hr />

    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  </div>
);

export default App;

В этом примере, компонент App содержит навигационные ссылки (<Link>) и компоненты Route, которые определяют, какие компоненты отображаются при соответствующих путях URL. Когда вы переходите по ссылкам, React Router автоматически обновляет компоненты, отображаемые на странице, без перезагрузки всего приложения.

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