Setup Bootstrap 5 Navbar in ReactJS with Router

Welcome to frontendshape. Today we will create react bootstrap 5 navbar menu with react router 6. First you need to create react app with bootstrap 5. For this section we will use vite and typescript and react bootstrap. you can read below article.

Install & Setup Vite + React + Typescript + Bootstrap 5

Install React Router.

npm install react-router-dom@6

Create Page Folder in src and create About.tsx, Home.tsx file.

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>
  );
}

Create Components folder and add react bootstrap navbar with router link.

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>
  );
}

Next, Setup router and pages in 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;

Run the server.

npm run dev

react bootstrap 5 navbar with router