Настройка Bootstrap 5 Navbar в ReactJS с помощью Router

Добро пожаловать на frontendshape. Сегодня мы создадим меню-навбар на react bootstrap 5 с помощью react router 6. Сначала вам нужно создать приложение react с bootstrap 5. Для этого раздела мы будем использовать vite и typescript и react bootstrap. вы можете прочитать статью ниже.
Установка и настройка Vite + React + Typescript + Bootstrap 5
просмотр

npm install react-router-dom@6

Войдите в полноэкранный режим Выйдите из полноэкранного режима

Создайте папку Page в src и создайте файлы About.tsx, Home.tsx.
src/Page/Home.tsx

import React from 'react'

export default function Home() {
  return (
    <div>
      <h1>Home</h1>
    </div>
  )
}

Войдите в полноэкранный режим Выйти из полноэкранного режима

src/Page/Contact.tsx

import React from 'react'

export default function Contact() {
  return (
    <div>
      <h1>Contact Us</h1>
    </div>
  )
}

Войти в полноэкранный режим Выйти из полноэкранного режима

src/Page/About.tsx

import React from 'react';

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
    </div>
  );
}

Ввести полноэкранный режим Выйти из полноэкранного режима

Создайте папку Components и добавьте в нее react bootstrap navbar со ссылкой на маршрутизатор.
src/Components/Menu.tsx

import React from 'react';
import Container from 'react-bootstrap/Container';
import { Link } from 'react-router-dom';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';

export default function Menu() {
  return (
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark" className="p-3">
      <Container>
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link>
              {' '}
              <Link className="text-decoration-none text-white" to="/">
                Home
              </Link>
            </Nav.Link>
            <Nav.Link>
              {' '}
              <Link className="text-decoration-none text-white" to="/about">
                About
              </Link>
            </Nav.Link>
            <Nav.Link>
              {' '}
              <Link className="text-decoration-none text-white" to="/contact">
                Contact Us
              </Link>
            </Nav.Link>
          </Nav>
          <Nav className="gap-2">
            <Nav.Link className="btn btn-primary" href="#">Login</Nav.Link>
            <Nav.Link eventKey={2} className="btn btn-light text-black" href="#">
              Sign up
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Далее настройте маршрутизатор и страницы в App.tsx.
src/App.tsx

import { useState } from 'react';

import { Routes, Route, Link, BrowserRouter } from 'react-router-dom';
import Home from './Page/Home';
import About from './Page/About';
import Error from './Page/Error';
import Menu from './Components/Menu';
import Contact from './Page/Contact';

function App() {
  return (
    <>
      <BrowserRouter>
        <Menu />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="*" element={<Error />} />
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

Войти в полноэкранный режим Выйти из полноэкранного режима

Запустите сервер.

npm run dev

Войти в полноэкранный режим Выход из полноэкранного режима