src/App.tsx

tsx
import { Route, Routes, Navigate, useLocation } from 'react-router-dom'
import Layout from './components/Layout'
import Home from './pages/Home'
import Watch from './pages/Watch'
import Channel from './pages/Channel'
import Search from './pages/Search'
import Upload from './pages/Upload'
import Login from './pages/Login'
import Register from './pages/Register'
import { useAuthStore } from './store/auth'

function Protected({ children }: { children: JSX.Element }) {
  const token = useAuthStore(s => s.token)
  const loc = useLocation()
  if (!token) return <Navigate to="/login" state={{ from: loc }} replace />
  return children
}

export default function App() {
  return (
    <Routes>
      <Route element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="/watch/:id" element={<Watch />} />
        <Route path="/channel/:id" element={<Channel />} />
        <Route path="/search" element={<Search />} />
        <Route path="/upload" element={<Protected><Upload /></Protected>} />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Route>
      <Route path="/login" element={<Login />} />
      <Route path="/register" element={<Register />} />
    </Routes>
  )
}

</html>