Как установить React Router: пошаговое руководство

Чтобы установить React Router, вы можете выполнить следующие действия:

  1. Если вы еще не создали приложение React, начните с настройки нового проекта React с помощью create-react-app или любого другого метода, который вы предпочитаете.

  2. Откройте проект в терминале или командной строке.

  3. Выполните следующую команду, чтобы установить React Router с помощью npm (диспетчер пакетов узлов):

    npm install react-router-dom

    Эта команда загрузит и установит пакет React Router и его зависимости в вашем проекте.

  4. После завершения установки вы можете импортировать и использовать React Router в своем приложении. Вот пример его использования в компоненте React:

    import React from 'react';
    import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
    function App() {
     return (
       <Router>
         <Switch>
           <Route exact path="/" component={Home} />
           <Route path="/about" component={About} />
           <Route path="/contact" component={Contact} />
         </Switch>
       </Router>
     );
    }
    function Home() {
     return <h1>Home Page</h1>;
    }
    function About() {
     return <h1>About Page</h1>;
    }
    function Contact() {
     return <h1>Contact Page</h1>;
    }
    export default App;

    В этом примере мы импортируем необходимые компоненты из «react-router-dom» и определяем маршруты с помощью компонента . Компонент гарантирует, что одновременно отображается только один маршрут.

  5. Теперь вы можете запустить приложение React и начать использовать React Router для навигации.