How to build admin routing system.

import { useState } from 'react'
import { BrowserRouter, Routes, Route, Link, useNavigate } from 'react-router-dom'
import Home from './pages/Home'
import Login from './pages/Login'
import Marketplace from './pages/Marketplace'
import Checkout from './pages/Checkout'
import MyOrders from './pages/MyOrders'
import ProducerDashboard from './pages/ProducerDashboard'
import Loyalty from './pages/Loyalty'
import AboutUs from './pages/AboutUs'
import ProducerInfo from './pages/ProducerInfo'
import './index.css'

function Navbar({ user, setUser }) {
  const navigate = useNavigate()

  const handleLogout = () => {
    localStorage.removeItem('user')
    setUser(null)
    navigate('/')
  }

  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/marketplace">Marketplace</Link>
      <Link to="/about">About Us</Link>
      <Link to="/producers">Our Producers</Link>

      {user && user.role === 'customer' && <Link to="/orders">My Orders</Link>}
      {user && user.role === 'customer' && <Link to="/loyalty">Loyalty</Link>}
      {user && user.role === 'producer' && <Link to="/producer">Dashboard</Link>}

      {!user && <Link to="/login">Login</Link>}

      {user && (
        <span style={{ marginLeft:'auto', color:'white' }}>
          Hi {user.name}
        </span>
      )}
      {user && (
        <button
          onClick={handleLogout}
          style={{ background:'#A2C24A', color:'white', border:'none', padding:'8px 16px', borderRadius:'6px', cursor:'pointer', fontFamily:'Gluten, cursive' }}
        >
          Logout
        </button>
      )}
    </nav>
  )
}

function App() {
  const [user, setUser] = useState(() => {
    const saved = localStorage.getItem('user')
    return saved ? JSON.parse(saved) : null
  })

  return (
    <BrowserRouter>
      <Navbar user={user} setUser={setUser} />
      <Routes>
        <Route path="/"            element={<Home />} />
        <Route path="/login"       element={<Login setUser={setUser} />} />
        <Route path="/marketplace" element={<Marketplace user={user} />} />
        <Route path="/checkout"    element={<Checkout user={user} />} />
        <Route path="/orders"      element={<MyOrders user={user} />} />
        <Route path="/producer"    element={<ProducerDashboard user={user} />} />
        <Route path="/loyalty"     element={<Loyalty />} />
        <Route path="/about"       element={<AboutUs />} />
        <Route path="/producers"   element={<ProducerInfo />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App

@import url('https://fonts.googleapis.com/css2?family=Gluten:wght@100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Gluten', cursive;
  background: #FAFAF5;
  color: #144A5C;
}

nav {
  background: #144A5C;
  padding: 15px 30px;
  display: flex;
  gap: 20px;
  align-items: center;
}

nav a {
  color: white;
  text-decoration: none;
}

.page {
  padding: 30px;
}