<\/p>\n
Updated July 4, 2026.<\/strong> Refreshed for React 19 and current SEO best practices.<\/p>\n<\/div>\n<\/p>\n\nTable of Contents<\/h2>\nFollow the React tutorial series in order:<\/p>\n\nLesson 1: React Tutorial \u2014 Introduction (2026)<\/a><\/li>\nLesson 2: React Setup \u2014 Create Your First App with Vite<\/a><\/li>\nLesson 3: React JSX and Components \u2014 Build Your First UI<\/a><\/li>\nLesson 4: React State and useState \u2014 Interactive UI (React 19+)<\/a><\/li>\nLesson 5: React useEffect \u2014 Side Effects and Data Fetching (React 19+)<\/a><\/li>\nLesson 6: React Forms \u2014 Controlled Inputs and Validation (React 19+)<\/a><\/li>\nLesson 7: React Router \u2014 Multi-Page Navigation (React 19+)<\/strong><\/li>\n\u2190 Back to React Tutorial hub<\/a><\/li>\n<\/ol>\n<\/nav>\n<\/p>\n\nReact 19 Notes<\/h4>\nReact Router v6 uses a declarative <Routes><\/code> API with nested <Outlet \/><\/code> layouts. For SEO-critical pages, pair React skills with Next.js<\/strong> or prerender key routes on your static host.<\/p>\n<\/div>\nThis lesson introduces React Router<\/strong> \u2014 the standard library for client-side routing in React SPAs. You will install react-router-dom<\/code>, define routes, navigate with Link<\/code>, read URL parameters, and structure a small multi-page app.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20136 with a Vite React project. Estimated time:<\/strong> 50\u201360 minutes.<\/p>\n1. Why Client-Side Routing?<\/h4>\nWithout a router, a React app is a single view. Users expect URLs like \/about<\/code> and \/users\/42<\/code> that work with bookmarks and the back button. React Router maps URLs to components without full page reloads.<\/p>\nPhoto by Mohammad Rahmani<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Install react-router-dom<\/h4>\nnpm install react-router-dom\n<\/code><\/pre>\nReact Router v6+ is the current API. It works with Vite and React 19 out of the box.<\/p>\n3. Basic Route Setup<\/h4>\nWrap your app in BrowserRouter<\/code> and define routes in main.jsx<\/code> or App.jsx<\/code>:<\/p>\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\nimport NotFound from '.\/pages\/NotFound';\n\nfunction App() {\n return (\n <BrowserRouter>\n <Routes>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n <Route path=\"*\" element={<NotFound \/>} \/>\n <\/Routes>\n <\/BrowserRouter>\n );\n}\n\nexport default App;\n<\/code><\/pre>\nCreate simple page components under src\/pages\/<\/code> \u2014 each returns a heading and paragraph for now.<\/p>\n4. Link and NavLink<\/h4>\nimport { Link, NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n <nav>\n <Link to=\"\/\">Home<\/Link>\n <NavLink\n to=\"\/about\"\n style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}\n >\n About\n <\/NavLink>\n <\/nav>\n );\n}\n<\/code><\/pre>\nUse Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
<\/p>\n\nTable of Contents<\/h2>\nFollow the React tutorial series in order:<\/p>\n\nLesson 1: React Tutorial \u2014 Introduction (2026)<\/a><\/li>\nLesson 2: React Setup \u2014 Create Your First App with Vite<\/a><\/li>\nLesson 3: React JSX and Components \u2014 Build Your First UI<\/a><\/li>\nLesson 4: React State and useState \u2014 Interactive UI (React 19+)<\/a><\/li>\nLesson 5: React useEffect \u2014 Side Effects and Data Fetching (React 19+)<\/a><\/li>\nLesson 6: React Forms \u2014 Controlled Inputs and Validation (React 19+)<\/a><\/li>\nLesson 7: React Router \u2014 Multi-Page Navigation (React 19+)<\/strong><\/li>\n\u2190 Back to React Tutorial hub<\/a><\/li>\n<\/ol>\n<\/nav>\n<\/p>\n\nReact 19 Notes<\/h4>\nReact Router v6 uses a declarative <Routes><\/code> API with nested <Outlet \/><\/code> layouts. For SEO-critical pages, pair React skills with Next.js<\/strong> or prerender key routes on your static host.<\/p>\n<\/div>\nThis lesson introduces React Router<\/strong> \u2014 the standard library for client-side routing in React SPAs. You will install react-router-dom<\/code>, define routes, navigate with Link<\/code>, read URL parameters, and structure a small multi-page app.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20136 with a Vite React project. Estimated time:<\/strong> 50\u201360 minutes.<\/p>\n1. Why Client-Side Routing?<\/h4>\nWithout a router, a React app is a single view. Users expect URLs like \/about<\/code> and \/users\/42<\/code> that work with bookmarks and the back button. React Router maps URLs to components without full page reloads.<\/p>\nPhoto by Mohammad Rahmani<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Install react-router-dom<\/h4>\nnpm install react-router-dom\n<\/code><\/pre>\nReact Router v6+ is the current API. It works with Vite and React 19 out of the box.<\/p>\n3. Basic Route Setup<\/h4>\nWrap your app in BrowserRouter<\/code> and define routes in main.jsx<\/code> or App.jsx<\/code>:<\/p>\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\nimport NotFound from '.\/pages\/NotFound';\n\nfunction App() {\n return (\n <BrowserRouter>\n <Routes>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n <Route path=\"*\" element={<NotFound \/>} \/>\n <\/Routes>\n <\/BrowserRouter>\n );\n}\n\nexport default App;\n<\/code><\/pre>\nCreate simple page components under src\/pages\/<\/code> \u2014 each returns a heading and paragraph for now.<\/p>\n4. Link and NavLink<\/h4>\nimport { Link, NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n <nav>\n <Link to=\"\/\">Home<\/Link>\n <NavLink\n to=\"\/about\"\n style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}\n >\n About\n <\/NavLink>\n <\/nav>\n );\n}\n<\/code><\/pre>\nUse Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
Follow the React tutorial series in order:<\/p>\n
React Router v6 uses a declarative <Routes><\/code> API with nested <Outlet \/><\/code> layouts. For SEO-critical pages, pair React skills with Next.js<\/strong> or prerender key routes on your static host.<\/p>\n<\/div>\nThis lesson introduces React Router<\/strong> \u2014 the standard library for client-side routing in React SPAs. You will install react-router-dom<\/code>, define routes, navigate with Link<\/code>, read URL parameters, and structure a small multi-page app.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20136 with a Vite React project. Estimated time:<\/strong> 50\u201360 minutes.<\/p>\n1. Why Client-Side Routing?<\/h4>\nWithout a router, a React app is a single view. Users expect URLs like \/about<\/code> and \/users\/42<\/code> that work with bookmarks and the back button. React Router maps URLs to components without full page reloads.<\/p>\nPhoto by Mohammad Rahmani<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Install react-router-dom<\/h4>\nnpm install react-router-dom\n<\/code><\/pre>\nReact Router v6+ is the current API. It works with Vite and React 19 out of the box.<\/p>\n3. Basic Route Setup<\/h4>\nWrap your app in BrowserRouter<\/code> and define routes in main.jsx<\/code> or App.jsx<\/code>:<\/p>\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\nimport NotFound from '.\/pages\/NotFound';\n\nfunction App() {\n return (\n <BrowserRouter>\n <Routes>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n <Route path=\"*\" element={<NotFound \/>} \/>\n <\/Routes>\n <\/BrowserRouter>\n );\n}\n\nexport default App;\n<\/code><\/pre>\nCreate simple page components under src\/pages\/<\/code> \u2014 each returns a heading and paragraph for now.<\/p>\n4. Link and NavLink<\/h4>\nimport { Link, NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n <nav>\n <Link to=\"\/\">Home<\/Link>\n <NavLink\n to=\"\/about\"\n style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}\n >\n About\n <\/NavLink>\n <\/nav>\n );\n}\n<\/code><\/pre>\nUse Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
<Routes><\/code> API with nested <Outlet \/><\/code> layouts. For SEO-critical pages, pair React skills with Next.js<\/strong> or prerender key routes on your static host.<\/p>\n<\/div>\nThis lesson introduces React Router<\/strong> \u2014 the standard library for client-side routing in React SPAs. You will install react-router-dom<\/code>, define routes, navigate with Link<\/code>, read URL parameters, and structure a small multi-page app.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20136 with a Vite React project. Estimated time:<\/strong> 50\u201360 minutes.<\/p>\n1. Why Client-Side Routing?<\/h4>\nWithout a router, a React app is a single view. Users expect URLs like \/about<\/code> and \/users\/42<\/code> that work with bookmarks and the back button. React Router maps URLs to components without full page reloads.<\/p>\nPhoto by Mohammad Rahmani<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Install react-router-dom<\/h4>\nnpm install react-router-dom\n<\/code><\/pre>\nReact Router v6+ is the current API. It works with Vite and React 19 out of the box.<\/p>\n3. Basic Route Setup<\/h4>\nWrap your app in BrowserRouter<\/code> and define routes in main.jsx<\/code> or App.jsx<\/code>:<\/p>\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\nimport NotFound from '.\/pages\/NotFound';\n\nfunction App() {\n return (\n <BrowserRouter>\n <Routes>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n <Route path=\"*\" element={<NotFound \/>} \/>\n <\/Routes>\n <\/BrowserRouter>\n );\n}\n\nexport default App;\n<\/code><\/pre>\nCreate simple page components under src\/pages\/<\/code> \u2014 each returns a heading and paragraph for now.<\/p>\n4. Link and NavLink<\/h4>\nimport { Link, NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n <nav>\n <Link to=\"\/\">Home<\/Link>\n <NavLink\n to=\"\/about\"\n style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}\n >\n About\n <\/NavLink>\n <\/nav>\n );\n}\n<\/code><\/pre>\nUse Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
<Outlet \/><\/code> layouts. For SEO-critical pages, pair React skills with Next.js<\/strong> or prerender key routes on your static host.<\/p>\n<\/div>\nThis lesson introduces React Router<\/strong> \u2014 the standard library for client-side routing in React SPAs. You will install react-router-dom<\/code>, define routes, navigate with Link<\/code>, read URL parameters, and structure a small multi-page app.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20136 with a Vite React project. Estimated time:<\/strong> 50\u201360 minutes.<\/p>\n1. Why Client-Side Routing?<\/h4>\nWithout a router, a React app is a single view. Users expect URLs like \/about<\/code> and \/users\/42<\/code> that work with bookmarks and the back button. React Router maps URLs to components without full page reloads.<\/p>\nPhoto by Mohammad Rahmani<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Install react-router-dom<\/h4>\nnpm install react-router-dom\n<\/code><\/pre>\nReact Router v6+ is the current API. It works with Vite and React 19 out of the box.<\/p>\n3. Basic Route Setup<\/h4>\nWrap your app in BrowserRouter<\/code> and define routes in main.jsx<\/code> or App.jsx<\/code>:<\/p>\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\nimport NotFound from '.\/pages\/NotFound';\n\nfunction App() {\n return (\n <BrowserRouter>\n <Routes>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n <Route path=\"*\" element={<NotFound \/>} \/>\n <\/Routes>\n <\/BrowserRouter>\n );\n}\n\nexport default App;\n<\/code><\/pre>\nCreate simple page components under src\/pages\/<\/code> \u2014 each returns a heading and paragraph for now.<\/p>\n4. Link and NavLink<\/h4>\nimport { Link, NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n <nav>\n <Link to=\"\/\">Home<\/Link>\n <NavLink\n to=\"\/about\"\n style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}\n >\n About\n <\/NavLink>\n <\/nav>\n );\n}\n<\/code><\/pre>\nUse Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
This lesson introduces React Router<\/strong> \u2014 the standard library for client-side routing in React SPAs. You will install react-router-dom<\/code>, define routes, navigate with Link<\/code>, read URL parameters, and structure a small multi-page app.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20136 with a Vite React project. Estimated time:<\/strong> 50\u201360 minutes.<\/p>\n1. Why Client-Side Routing?<\/h4>\nWithout a router, a React app is a single view. Users expect URLs like \/about<\/code> and \/users\/42<\/code> that work with bookmarks and the back button. React Router maps URLs to components without full page reloads.<\/p>\nPhoto by Mohammad Rahmani<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Install react-router-dom<\/h4>\nnpm install react-router-dom\n<\/code><\/pre>\nReact Router v6+ is the current API. It works with Vite and React 19 out of the box.<\/p>\n3. Basic Route Setup<\/h4>\nWrap your app in BrowserRouter<\/code> and define routes in main.jsx<\/code> or App.jsx<\/code>:<\/p>\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\nimport NotFound from '.\/pages\/NotFound';\n\nfunction App() {\n return (\n <BrowserRouter>\n <Routes>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n <Route path=\"*\" element={<NotFound \/>} \/>\n <\/Routes>\n <\/BrowserRouter>\n );\n}\n\nexport default App;\n<\/code><\/pre>\nCreate simple page components under src\/pages\/<\/code> \u2014 each returns a heading and paragraph for now.<\/p>\n4. Link and NavLink<\/h4>\nimport { Link, NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n <nav>\n <Link to=\"\/\">Home<\/Link>\n <NavLink\n to=\"\/about\"\n style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}\n >\n About\n <\/NavLink>\n <\/nav>\n );\n}\n<\/code><\/pre>\nUse Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
react-router-dom<\/code>, define routes, navigate with Link<\/code>, read URL parameters, and structure a small multi-page app.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20136 with a Vite React project. Estimated time:<\/strong> 50\u201360 minutes.<\/p>\n1. Why Client-Side Routing?<\/h4>\nWithout a router, a React app is a single view. Users expect URLs like \/about<\/code> and \/users\/42<\/code> that work with bookmarks and the back button. React Router maps URLs to components without full page reloads.<\/p>\nPhoto by Mohammad Rahmani<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Install react-router-dom<\/h4>\nnpm install react-router-dom\n<\/code><\/pre>\nReact Router v6+ is the current API. It works with Vite and React 19 out of the box.<\/p>\n3. Basic Route Setup<\/h4>\nWrap your app in BrowserRouter<\/code> and define routes in main.jsx<\/code> or App.jsx<\/code>:<\/p>\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\nimport NotFound from '.\/pages\/NotFound';\n\nfunction App() {\n return (\n <BrowserRouter>\n <Routes>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n <Route path=\"*\" element={<NotFound \/>} \/>\n <\/Routes>\n <\/BrowserRouter>\n );\n}\n\nexport default App;\n<\/code><\/pre>\nCreate simple page components under src\/pages\/<\/code> \u2014 each returns a heading and paragraph for now.<\/p>\n4. Link and NavLink<\/h4>\nimport { Link, NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n <nav>\n <Link to=\"\/\">Home<\/Link>\n <NavLink\n to=\"\/about\"\n style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}\n >\n About\n <\/NavLink>\n <\/nav>\n );\n}\n<\/code><\/pre>\nUse Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
Link<\/code>, read URL parameters, and structure a small multi-page app.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20136 with a Vite React project. Estimated time:<\/strong> 50\u201360 minutes.<\/p>\n1. Why Client-Side Routing?<\/h4>\nWithout a router, a React app is a single view. Users expect URLs like \/about<\/code> and \/users\/42<\/code> that work with bookmarks and the back button. React Router maps URLs to components without full page reloads.<\/p>\nPhoto by Mohammad Rahmani<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Install react-router-dom<\/h4>\nnpm install react-router-dom\n<\/code><\/pre>\nReact Router v6+ is the current API. It works with Vite and React 19 out of the box.<\/p>\n3. Basic Route Setup<\/h4>\nWrap your app in BrowserRouter<\/code> and define routes in main.jsx<\/code> or App.jsx<\/code>:<\/p>\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\nimport NotFound from '.\/pages\/NotFound';\n\nfunction App() {\n return (\n <BrowserRouter>\n <Routes>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n <Route path=\"*\" element={<NotFound \/>} \/>\n <\/Routes>\n <\/BrowserRouter>\n );\n}\n\nexport default App;\n<\/code><\/pre>\nCreate simple page components under src\/pages\/<\/code> \u2014 each returns a heading and paragraph for now.<\/p>\n4. Link and NavLink<\/h4>\nimport { Link, NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n <nav>\n <Link to=\"\/\">Home<\/Link>\n <NavLink\n to=\"\/about\"\n style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}\n >\n About\n <\/NavLink>\n <\/nav>\n );\n}\n<\/code><\/pre>\nUse Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
Prerequisites:<\/strong> Lessons 1\u20136 with a Vite React project. Estimated time:<\/strong> 50\u201360 minutes.<\/p>\n1. Why Client-Side Routing?<\/h4>\nWithout a router, a React app is a single view. Users expect URLs like \/about<\/code> and \/users\/42<\/code> that work with bookmarks and the back button. React Router maps URLs to components without full page reloads.<\/p>\nPhoto by Mohammad Rahmani<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Install react-router-dom<\/h4>\nnpm install react-router-dom\n<\/code><\/pre>\nReact Router v6+ is the current API. It works with Vite and React 19 out of the box.<\/p>\n3. Basic Route Setup<\/h4>\nWrap your app in BrowserRouter<\/code> and define routes in main.jsx<\/code> or App.jsx<\/code>:<\/p>\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\nimport NotFound from '.\/pages\/NotFound';\n\nfunction App() {\n return (\n <BrowserRouter>\n <Routes>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n <Route path=\"*\" element={<NotFound \/>} \/>\n <\/Routes>\n <\/BrowserRouter>\n );\n}\n\nexport default App;\n<\/code><\/pre>\nCreate simple page components under src\/pages\/<\/code> \u2014 each returns a heading and paragraph for now.<\/p>\n4. Link and NavLink<\/h4>\nimport { Link, NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n <nav>\n <Link to=\"\/\">Home<\/Link>\n <NavLink\n to=\"\/about\"\n style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}\n >\n About\n <\/NavLink>\n <\/nav>\n );\n}\n<\/code><\/pre>\nUse Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
Without a router, a React app is a single view. Users expect URLs like \/about<\/code> and \/users\/42<\/code> that work with bookmarks and the back button. React Router maps URLs to components without full page reloads.<\/p>\nPhoto by Mohammad Rahmani<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Install react-router-dom<\/h4>\nnpm install react-router-dom\n<\/code><\/pre>\nReact Router v6+ is the current API. It works with Vite and React 19 out of the box.<\/p>\n3. Basic Route Setup<\/h4>\nWrap your app in BrowserRouter<\/code> and define routes in main.jsx<\/code> or App.jsx<\/code>:<\/p>\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\nimport NotFound from '.\/pages\/NotFound';\n\nfunction App() {\n return (\n <BrowserRouter>\n <Routes>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n <Route path=\"*\" element={<NotFound \/>} \/>\n <\/Routes>\n <\/BrowserRouter>\n );\n}\n\nexport default App;\n<\/code><\/pre>\nCreate simple page components under src\/pages\/<\/code> \u2014 each returns a heading and paragraph for now.<\/p>\n4. Link and NavLink<\/h4>\nimport { Link, NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n <nav>\n <Link to=\"\/\">Home<\/Link>\n <NavLink\n to=\"\/about\"\n style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}\n >\n About\n <\/NavLink>\n <\/nav>\n );\n}\n<\/code><\/pre>\nUse Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
\/about<\/code> and \/users\/42<\/code> that work with bookmarks and the back button. React Router maps URLs to components without full page reloads.<\/p>\nPhoto by Mohammad Rahmani<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Install react-router-dom<\/h4>\nnpm install react-router-dom\n<\/code><\/pre>\nReact Router v6+ is the current API. It works with Vite and React 19 out of the box.<\/p>\n3. Basic Route Setup<\/h4>\nWrap your app in BrowserRouter<\/code> and define routes in main.jsx<\/code> or App.jsx<\/code>:<\/p>\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\nimport NotFound from '.\/pages\/NotFound';\n\nfunction App() {\n return (\n <BrowserRouter>\n <Routes>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n <Route path=\"*\" element={<NotFound \/>} \/>\n <\/Routes>\n <\/BrowserRouter>\n );\n}\n\nexport default App;\n<\/code><\/pre>\nCreate simple page components under src\/pages\/<\/code> \u2014 each returns a heading and paragraph for now.<\/p>\n4. Link and NavLink<\/h4>\nimport { Link, NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n <nav>\n <Link to=\"\/\">Home<\/Link>\n <NavLink\n to=\"\/about\"\n style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}\n >\n About\n <\/NavLink>\n <\/nav>\n );\n}\n<\/code><\/pre>\nUse Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
\/users\/42<\/code> that work with bookmarks and the back button. React Router maps URLs to components without full page reloads.<\/p>\nPhoto by Mohammad Rahmani<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Install react-router-dom<\/h4>\nnpm install react-router-dom\n<\/code><\/pre>\nReact Router v6+ is the current API. It works with Vite and React 19 out of the box.<\/p>\n3. Basic Route Setup<\/h4>\nWrap your app in BrowserRouter<\/code> and define routes in main.jsx<\/code> or App.jsx<\/code>:<\/p>\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\nimport NotFound from '.\/pages\/NotFound';\n\nfunction App() {\n return (\n <BrowserRouter>\n <Routes>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n <Route path=\"*\" element={<NotFound \/>} \/>\n <\/Routes>\n <\/BrowserRouter>\n );\n}\n\nexport default App;\n<\/code><\/pre>\nCreate simple page components under src\/pages\/<\/code> \u2014 each returns a heading and paragraph for now.<\/p>\n4. Link and NavLink<\/h4>\nimport { Link, NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n <nav>\n <Link to=\"\/\">Home<\/Link>\n <NavLink\n to=\"\/about\"\n style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}\n >\n About\n <\/NavLink>\n <\/nav>\n );\n}\n<\/code><\/pre>\nUse Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
npm install react-router-dom\n<\/code><\/pre>\nReact Router v6+ is the current API. It works with Vite and React 19 out of the box.<\/p>\n3. Basic Route Setup<\/h4>\nWrap your app in BrowserRouter<\/code> and define routes in main.jsx<\/code> or App.jsx<\/code>:<\/p>\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\nimport NotFound from '.\/pages\/NotFound';\n\nfunction App() {\n return (\n <BrowserRouter>\n <Routes>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n <Route path=\"*\" element={<NotFound \/>} \/>\n <\/Routes>\n <\/BrowserRouter>\n );\n}\n\nexport default App;\n<\/code><\/pre>\nCreate simple page components under src\/pages\/<\/code> \u2014 each returns a heading and paragraph for now.<\/p>\n4. Link and NavLink<\/h4>\nimport { Link, NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n <nav>\n <Link to=\"\/\">Home<\/Link>\n <NavLink\n to=\"\/about\"\n style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}\n >\n About\n <\/NavLink>\n <\/nav>\n );\n}\n<\/code><\/pre>\nUse Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
React Router v6+ is the current API. It works with Vite and React 19 out of the box.<\/p>\n
Wrap your app in BrowserRouter<\/code> and define routes in main.jsx<\/code> or App.jsx<\/code>:<\/p>\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\nimport NotFound from '.\/pages\/NotFound';\n\nfunction App() {\n return (\n <BrowserRouter>\n <Routes>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n <Route path=\"*\" element={<NotFound \/>} \/>\n <\/Routes>\n <\/BrowserRouter>\n );\n}\n\nexport default App;\n<\/code><\/pre>\nCreate simple page components under src\/pages\/<\/code> \u2014 each returns a heading and paragraph for now.<\/p>\n4. Link and NavLink<\/h4>\nimport { Link, NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n <nav>\n <Link to=\"\/\">Home<\/Link>\n <NavLink\n to=\"\/about\"\n style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}\n >\n About\n <\/NavLink>\n <\/nav>\n );\n}\n<\/code><\/pre>\nUse Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
BrowserRouter<\/code> and define routes in main.jsx<\/code> or App.jsx<\/code>:<\/p>\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\nimport NotFound from '.\/pages\/NotFound';\n\nfunction App() {\n return (\n <BrowserRouter>\n <Routes>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n <Route path=\"*\" element={<NotFound \/>} \/>\n <\/Routes>\n <\/BrowserRouter>\n );\n}\n\nexport default App;\n<\/code><\/pre>\nCreate simple page components under src\/pages\/<\/code> \u2014 each returns a heading and paragraph for now.<\/p>\n4. Link and NavLink<\/h4>\nimport { Link, NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n <nav>\n <Link to=\"\/\">Home<\/Link>\n <NavLink\n to=\"\/about\"\n style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}\n >\n About\n <\/NavLink>\n <\/nav>\n );\n}\n<\/code><\/pre>\nUse Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
main.jsx<\/code> or App.jsx<\/code>:<\/p>\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\nimport NotFound from '.\/pages\/NotFound';\n\nfunction App() {\n return (\n <BrowserRouter>\n <Routes>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n <Route path=\"*\" element={<NotFound \/>} \/>\n <\/Routes>\n <\/BrowserRouter>\n );\n}\n\nexport default App;\n<\/code><\/pre>\nCreate simple page components under src\/pages\/<\/code> \u2014 each returns a heading and paragraph for now.<\/p>\n4. Link and NavLink<\/h4>\nimport { Link, NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n <nav>\n <Link to=\"\/\">Home<\/Link>\n <NavLink\n to=\"\/about\"\n style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}\n >\n About\n <\/NavLink>\n <\/nav>\n );\n}\n<\/code><\/pre>\nUse Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
App.jsx<\/code>:<\/p>\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\nimport NotFound from '.\/pages\/NotFound';\n\nfunction App() {\n return (\n <BrowserRouter>\n <Routes>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n <Route path=\"*\" element={<NotFound \/>} \/>\n <\/Routes>\n <\/BrowserRouter>\n );\n}\n\nexport default App;\n<\/code><\/pre>\nCreate simple page components under src\/pages\/<\/code> \u2014 each returns a heading and paragraph for now.<\/p>\n4. Link and NavLink<\/h4>\nimport { Link, NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n <nav>\n <Link to=\"\/\">Home<\/Link>\n <NavLink\n to=\"\/about\"\n style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}\n >\n About\n <\/NavLink>\n <\/nav>\n );\n}\n<\/code><\/pre>\nUse Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
import { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\nimport NotFound from '.\/pages\/NotFound';\n\nfunction App() {\n return (\n <BrowserRouter>\n <Routes>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n <Route path=\"*\" element={<NotFound \/>} \/>\n <\/Routes>\n <\/BrowserRouter>\n );\n}\n\nexport default App;\n<\/code><\/pre>\nCreate simple page components under src\/pages\/<\/code> \u2014 each returns a heading and paragraph for now.<\/p>\n4. Link and NavLink<\/h4>\nimport { Link, NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n <nav>\n <Link to=\"\/\">Home<\/Link>\n <NavLink\n to=\"\/about\"\n style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}\n >\n About\n <\/NavLink>\n <\/nav>\n );\n}\n<\/code><\/pre>\nUse Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
Create simple page components under src\/pages\/<\/code> \u2014 each returns a heading and paragraph for now.<\/p>\n4. Link and NavLink<\/h4>\nimport { Link, NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n <nav>\n <Link to=\"\/\">Home<\/Link>\n <NavLink\n to=\"\/about\"\n style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}\n >\n About\n <\/NavLink>\n <\/nav>\n );\n}\n<\/code><\/pre>\nUse Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
src\/pages\/<\/code> \u2014 each returns a heading and paragraph for now.<\/p>\n4. Link and NavLink<\/h4>\nimport { Link, NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n <nav>\n <Link to=\"\/\">Home<\/Link>\n <NavLink\n to=\"\/about\"\n style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}\n >\n About\n <\/NavLink>\n <\/nav>\n );\n}\n<\/code><\/pre>\nUse Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
import { Link, NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n return (\n <nav>\n <Link to=\"\/\">Home<\/Link>\n <NavLink\n to=\"\/about\"\n style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}\n >\n About\n <\/NavLink>\n <\/nav>\n );\n}\n<\/code><\/pre>\nUse Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
Use Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
Link<\/code> instead of <a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
<a href><\/code> for internal routes \u2014 it prevents full reloads. NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
NavLink<\/code> adds an isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
isActive<\/code> callback for styling the current page.<\/p>\n5. URL Parameters<\/h4>\n\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
\/\/ Route definition\n<Route path=\"\/lessons\/:slug\" element={<LessonDetail \/>} \/>\n\n\/\/ LessonDetail.jsx\nimport { useParams } from 'react-router-dom';\n\nfunction LessonDetail() {\n const { slug } = useParams();\n return <h1>Lesson: {slug}<\/h1>;\n}\n<\/code><\/pre>\nDynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
Dynamic segments (:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
:slug<\/code>) are common for blog posts, product pages, and user profiles \u2014 core patterns in a react router tutorial<\/strong>.<\/p>\n6. Layout Routes with Outlet<\/h4>\nfunction Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
function Layout() {\n return (\n <>\n <Navbar \/>\n <main>\n <Outlet \/>\n <\/main>\n <\/>\n );\n}\n\n\/\/ Routes\n<Route element={<Layout \/>}>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/about\" element={<About \/>} \/>\n<\/Route>\n<\/code><\/pre>\nOutlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
Outlet<\/code> renders the matched child route \u2014 shared nav and footer without duplicating markup.<\/p>\n7. Programmatic Navigation<\/h4>\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
import { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n const navigate = useNavigate();\n\n function onSuccess() {\n navigate('\/dashboard', { replace: true });\n }\n}\n<\/code><\/pre>\nUse navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
Use navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
navigate<\/code> after form submit or logout. replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
replace: true<\/code> avoids stacking history entries.<\/p>\n8. Vite and Production Deploy<\/h4>\nFor SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
For SPAs on static hosts, configure the server to fallback to index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
index.html<\/code> for unknown paths \u2014 otherwise refreshing \/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
\/about<\/code> returns 404. Vite dev server handles this automatically; production depends on your host (Netlify, Vercel, nginx rewrite rules).<\/p>\n9. Next Steps<\/h4>\nYou now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
You now have a seven-lesson foundation: setup, JSX, state, effects, forms, and routing. Explore Angular tutorials<\/a> for a full-framework comparison, or join Alkademy<\/a> for live React projects.<\/p>\nSeries: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
Series: Lesson 6<\/a> \u00b7 Tutorial hub<\/a><\/p>\nFrequently Asked Questions<\/h4>\nWhat is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
What is React Router used for?<\/strong>\nReact Router maps URL paths to React components, enabling multi-page navigation in single-page applications without full browser reloads.<\/p>\nReact Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
React Router vs Next.js routing?<\/strong>\nReact Router is client-side only \u2014 ideal for Vite SPAs. Next.js includes file-based routing with server rendering for SEO-heavy sites.<\/p>\nHow do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
How do I protect routes that require login?<\/strong>\nCreate a wrapper component that checks auth state and redirects with Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
Navigate to=\"\/login\"<\/code> or useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
useNavigate<\/code> when the user is not authenticated.<\/p>\n\n
\n