Step 1: Install Bootstrap

              npm install react-bootstrap bootstrap
              
             

Step 2: install route

              npm install react-router-dom
            

Step 3: Create Pages

             src/
              ├── layouts/
              │   ├── PublicLayout.tsx
              │   └── DashboardLayout.tsx
              ├── pages/
              │   ├── Home.tsx
              │   ├── Login.tsx
              │   ├── About.tsx
              │   └── DashboardHome.tsx
              │   └── DashboardUsers.tsx
              └── App.tsx

                

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/Login.tsx

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

                      

pages/DashboardHome.tsx

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

                      

pages/DashboardUsers.tsx

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

                      

Step 4: Create Common Layout

1. /layouts/PublicLayout.tsx

              import React from 'react';
              import { Outlet, Link } from 'react-router-dom';

              const PublicLayout: React.FC = () => (
                <>
                  <header>
                    <nav>
                      <Link to="/">Home</Link> | <Link to="/about">About</Link> | <Link to="/login">Login</Link>
                    </nav>
                  </header>
                  <main>
                    <Outlet />
                  </main>
                </>
              );

              export default PublicLayout;



                      

2. layouts/DashboardLayout.tsx

                        import React from 'react';
                        import { Outlet, Link } from 'react-router-dom';

                        const DashboardLayout: React.FC = () => (
                          <>
                            <aside>
                              <nav>
                                <Link to="/dashboard">Dashboard</Link> | <Link to="/dashboard/users">Users</Link>
                              </nav>
                            </aside>
                            <main>
                              <Outlet />
                            </main>
                          </>
                        );

                        export default DashboardLayout;

                        

Step 4: Setup Routing in App.tsx

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

import PublicLayout from './layouts/PublicLayout';
import DashboardLayout from './layouts/DashboardLayout';

import Home from './pages/Home';
import About from './pages/About';
import Login from './pages/Login';
import DashboardHome from './pages/DashboardHome';
import DashboardUsers from './pages/DashboardUsers';

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* Public routes */}
        <Route path="/" element={<PublicLayout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="login" element={<Login />} />
        </Route>

        {/* Dashboard routes */}
        <Route path="/dashboard" element={<DashboardLayout />}>
          <Route index element={<DashboardHome />} />
          <Route path="users" element={<DashboardUsers />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

multiple layouts are managed in Routes

5. Routes

Path	              Layout	            Page Component
/	                  PublicLayout	      Home.tsx
/about	            PublicLayout	      About.tsx
/login	            PublicLayout	      Login.tsx
/dashboard	        DashboardLayout	    DashboardHome.tsx
/dashboard/users	  DashboardLayout	    DashboardUsers.tsx