React Router v7 Routing and Navigation Architecture

// src/main.jsx
import { BrowserRouter } from 'react-router-dom'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
)

// src/App.jsx
import { Routes, Route, useLocation, useNavigate } from 'react-router-dom'
import { AnimatePresence } from 'framer-motion'

function AnimatedRoutes() {
  const location = useLocation()
  return (
    <AnimatePresence mode="wait">
      <Routes location={location} key={location.pathname}>
        <Route path="/"        element={<PageTransition><MenuScreen /></PageTransition>} />
        <Route path="/about"   element={<PageTransition variant="about"><AboutMe /></PageTransition>} />
        <Route path="/resume"  element={<PageTransition><ResumePage src={main2} /></PageTransition>} />
        <Route path="/socials" element={<PageTransition variant="socials"><Socials /></PageTransition>} />
      </Routes>
    </AnimatePresence>
  )
}

function MenuScreen() {
  const navigate = useNavigate()
  return (
    <div id="menu-screen">
      <video src={menuVideo} autoPlay loop muted playsInline />
      <P3Menu onNavigate={(page) => navigate(`/${page}`)} />
    </div>
  )
}