Step 1: Install Bootstrap

              npm install react-bootstrap bootstrap
              
             

Step 2: install route

              npm install react-router-dom
            

Step 3: Create Pages

              App
                ├── Layout
                │    ├── Header
                │    ├── Sidebar
                │    └── <Outlet /> (Page content)
                ├── Home
                ├── About
                └── Contact

                

Outlet is used to show the content of requested page pages/Home.tsx

                  function Home() {
                    return <h2>Home Page</h2>;
                  }
                  export default Home;

                  

pages/About.tsx

                    function About() {
                      return <h2>About Page</h2>;
                    }
                    export default About;

                    

pages/Contact.tsx

                      function Contact() {
                        return <h2>Contact Page</h2>;
                      }
                      export default Contact;


                      

Step 4: Create Common Layout

src/components/Layout.tsx

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

                      function Layout() {
                        return (
                          <>
                            <Navbar bg="dark" variant="dark" expand="lg">
                              <Container>
                                <Navbar.Brand as={Link} to="/">MyApp</Navbar.Brand>
                                <Nav className="me-auto">
                                  <Nav.Link as={Link} to="/">Home</Nav.Link>
                                  <Nav.Link as={Link} to="/about">About</Nav.Link>
                                  <Nav.Link as={Link} to="/contact">Contact</Nav.Link>
                                </Nav>
                              </Container>
                            </Navbar>

                            <Container className="mt-4">
                              <Outlet />
                            </Container>
                          </>
                        );
                      }

                      export default Layout;


                      

Step 4: Setup Routing in App.tsx

                      import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';

import Layout from './components/Layout';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

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

export default App;