more organizing

Author: kentcdodds

exercises/99.final/01.solution.final/src/app.tsx

@@ -1,10 +1,8 @@
 import { createRoot } from 'react-dom/client'
-import { BrowserRouter } from 'react-router'
+import { RouterProvider } from 'react-router'
 import './styles/index.css'
-import { AppRoutes } from './routes.tsx'
+import { router } from './routes.tsx'
 
 createRoot(document.getElementById('🧭')!).render(
-	<BrowserRouter>
-		<AppRoutes />
-	</BrowserRouter>,
+	<RouterProvider router={router} />,
 )

exercises/99.final/01.solution.final/src/main.tsx

@@ -1,24 +1,41 @@
-import { Routes, Route } from 'react-router'
+import { createBrowserRouter } from 'react-router'
 import { AppLayout } from './routes/app/layout.tsx'
+import { AboutRoute } from './routes/app/marketing/about.tsx'
+import { HomepageRoute } from './routes/app/marketing/homepage.tsx'
+import { MarketingLayout } from './routes/app/marketing/layout.tsx'
 import { RecipientRoute } from './routes/app/recipient.tsx'
 import { RecipientsRoute } from './routes/app/recipients.tsx'
-import { AboutRoute } from './routes/marketing/about.tsx'
-import { HomepageRoute } from './routes/marketing/homepage.tsx'
-import { MarketingLayout } from './routes/marketing/layout.tsx'
 import { SignupRoute } from './routes/signup.tsx'
 
-export function AppRoutes() {
-	return (
-		<Routes>
-			<Route element={<AppLayout />}>
-				<Route path="/" element={<MarketingLayout />}>
-					<Route index element={<HomepageRoute />} />
-					<Route path="about" element={<AboutRoute />} />
-				</Route>
-				<Route path="recipients" element={<RecipientsRoute />} />
-				<Route path="recipients/:id" element={<RecipientRoute />} />
-			</Route>
-			<Route path="/signup" element={<SignupRoute />} />
-		</Routes>
-	)
-}
+export const router = createBrowserRouter([
+	{
+		element: <AppLayout />,
+		children: [
+			{
+				element: <MarketingLayout />,
+				children: [
+					{
+						index: true,
+						element: <HomepageRoute />,
+					},
+					{
+						path: 'about',
+						element: <AboutRoute />,
+					},
+				],
+			},
+			{
+				path: 'recipients',
+				element: <RecipientsRoute />,
+			},
+			{
+				path: 'recipients/:id',
+				element: <RecipientRoute />,
+			},
+		],
+	},
+	{
+		path: '/signup',
+		element: <SignupRoute />,
+	},
+])

exercises/99.final/01.solution.final/src/routes.tsx

@@ -3,7 +3,7 @@ import { LinkButton } from '#src/components/button.tsx'
 
 export function AppLayout() {
 	return (
-		<div className="bg-background flex h-screen flex-col overflow-hidden">
+		<div className="bg-background flex h-screen flex-col">
 			<header className="bg-background-alt px-4 py-3">
 				<div className="container mx-auto flex max-w-6xl items-center justify-between">
 					<Link

exercises/99.final/01.solution.final/src/routes/app/layout.tsx

@@ -1,4 +1,4 @@
-import { LinkButton } from '../../components/button.tsx'
+import { LinkButton } from '#src/components/button.tsx'
 
 export function HomepageRoute() {
 	return (