[{"data":1,"prerenderedAt":129},["ShallowReactive",2],{"qa-\u002Freact\u002Frouting\u002Frouting-basics":3},{"page":4,"siblings":113,"blog":126},{"id":5,"title":6,"body":7,"description":11,"difficulty":14,"extension":15,"framework":16,"frameworkSlug":17,"meta":18,"navigation":19,"order":20,"path":21,"questions":22,"questionsCount":104,"related":105,"seo":106,"seoDescription":107,"stem":108,"subtopic":6,"topic":109,"topicSlug":110,"updated":111,"__hash__":112},"qa\u002Freact\u002Frouting\u002Frouting-basics.md","Routing Basics",{"type":8,"value":9,"toc":10},"minimark",[],{"title":11,"searchDepth":12,"depth":12,"links":13},"",2,[],"easy","md","React","react",{},true,1,"\u002Freact\u002Frouting\u002Frouting-basics",[23,27,31,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96,100],{"id":24,"difficulty":14,"q":25,"a":26},"what-is-client-side-routing","What is client-side routing and why does React use it?","**Client-side routing** means the browser never performs a full page reload when navigating between views. Instead, JavaScript intercepts navigation events, updates the URL via the **History API**, and re-renders the appropriate component tree — giving the feel of a multi-page app without the network round-trip.\n\n```jsx\n\u002F\u002F Without client-side routing: browser fetches \u002Fabout from the server\n\u002F\u002F With client-side routing: JS swaps components and pushes to history\nimport { Link } from 'react-router-dom';\n\nfunction Nav() {\n  return (\n    \u002F\u002F Clicking this never triggers a server request\n    \u003CLink to=\"\u002Fabout\">About\u003C\u002FLink>\n  );\n}\n```\n\n**Rule of thumb:** Use client-side routing in any React SPA so users get instant navigation and the app shell (header, sidebar) stays mounted across route changes.\n",{"id":28,"difficulty":14,"q":29,"a":30},"install-react-router-v6","How do you install and minimally set up React Router v6?","Install the package, then wrap your app in **BrowserRouter** (or use **createBrowserRouter** for the data router API). Every router hook and component must live inside that provider.\n\n```jsx\n\u002F\u002F 1. npm install react-router-dom\n\n\u002F\u002F 2. main.jsx — wrap the root\nimport { BrowserRouter } from 'react-router-dom';\nimport { createRoot } from 'react-dom\u002Fclient';\nimport App from '.\u002FApp';\n\ncreateRoot(document.getElementById('root')).render(\n  \u003CBrowserRouter>   {\u002F* provides routing context to the whole tree *\u002F}\n    \u003CApp \u002F>\n  \u003C\u002FBrowserRouter>\n);\n```\n\n**Rule of thumb:** Always place `BrowserRouter` (or its equivalent) at the very root of your component tree, not inside a page component — otherwise hooks like `useNavigate` will throw a context error.\n",{"id":32,"difficulty":33,"q":34,"a":35},"create-browser-router-api","medium","What is createBrowserRouter and how does it differ from BrowserRouter?","**createBrowserRouter** is the v6.4+ **data router** API. It co-locates routes with **loaders** and **actions** (server-style data fetching\u002Fmutation), and it is the recommended approach for new apps. **BrowserRouter** is the legacy component wrapper that does not support loaders\u002Factions.\n\n```jsx\nimport { createBrowserRouter, RouterProvider } from 'react-router-dom';\nimport Root from '.\u002FRoot';\nimport Home from '.\u002FHome';\nimport About from '.\u002FAbout';\n\nconst router = createBrowserRouter([\n  {\n    path: '\u002F',\n    element: \u003CRoot \u002F>,   \u002F\u002F layout with \u003COutlet \u002F>\n    children: [\n      { index: true, element: \u003CHome \u002F> },\n      { path: 'about', element: \u003CAbout \u002F> },\n    ],\n  },\n]);\n\n\u002F\u002F main.jsx\n\u003CRouterProvider router={router} \u002F>\n```\n\n**Rule of thumb:** Reach for `createBrowserRouter` in greenfield projects; use `BrowserRouter` only when you need to stay on the simpler JSX-only API or are migrating incrementally.\n",{"id":37,"difficulty":14,"q":38,"a":39},"route-and-routes-components","What are the Routes and Route components, and how do they work together?","**Routes** is a container that picks the single best-matching **Route** from its children. **Route** declares a `path` and the `element` to render when the URL matches. In v6, `Routes` replaces the v5 `Switch` and always does **exclusive** (first-match) selection.\n\n```jsx\nimport { Routes, Route } from 'react-router-dom';\nimport Home from '.\u002FHome';\nimport About from '.\u002FAbout';\nimport NotFound from '.\u002FNotFound';\n\nfunction App() {\n  return (\n    \u003CRoutes>\n      \u003CRoute path=\"\u002F\" element={\u003CHome \u002F>} \u002F>\n      \u003CRoute path=\"\u002Fabout\" element={\u003CAbout \u002F>} \u002F>\n      \u003CRoute path=\"*\" element={\u003CNotFound \u002F>} \u002F>  {\u002F* catch-all *\u002F}\n    \u003C\u002FRoutes>\n  );\n}\n```\n\n**Rule of thumb:** Always keep your top-level `Routes` block in one place (usually `App.jsx`) so route precedence is obvious at a glance.\n",{"id":41,"difficulty":14,"q":42,"a":43},"exact-matching-v6","How does path matching work in React Router v6 — is there an \"exact\" prop?","In v6 all routes match **exactly** by default — the `exact` prop was removed. A route with `path=\"\u002F\"` will **not** match `\u002Fabout`; you no longer need to add `exact` everywhere. The router also ranks routes by specificity, so more-specific paths win over less-specific ones.\n\n```jsx\n\u003CRoutes>\n  {\u002F* v5 needed exact on \"\u002F\", v6 does not *\u002F}\n  \u003CRoute path=\"\u002F\"        element={\u003CHome \u002F>} \u002F>   {\u002F* only \"\u002F\" *\u002F}\n  \u003CRoute path=\"\u002Fusers\"   element={\u003CUsers \u002F>} \u002F>  {\u002F* only \"\u002Fusers\" *\u002F}\n  \u003CRoute path=\"\u002Fusers\u002F:id\" element={\u003CUser \u002F>} \u002F> {\u002F* wins over \"\u002Fusers\" for \"\u002Fusers\u002F42\" *\u002F}\n\u003C\u002FRoutes>\n```\n\n**Rule of thumb:** Remove all `exact` props when migrating from v5 to v6 — they are a no-op and will generate a warning.\n",{"id":45,"difficulty":33,"q":46,"a":47},"nested-routes","How do nested routes work in React Router v6?","Nest **Route** elements inside a parent **Route** to model layout nesting. The parent renders its `element` and places an **Outlet** component where child routes should appear. The child path is **relative** to the parent — no leading slash needed.\n\n```jsx\n\u003CRoutes>\n  \u003CRoute path=\"\u002Fdashboard\" element={\u003CDashboardLayout \u002F>}>\n    {\u002F* relative paths — resolved as \u002Fdashboard\u002Foverview *\u002F}\n    \u003CRoute path=\"overview\"  element={\u003COverview \u002F>} \u002F>\n    \u003CRoute path=\"settings\"  element={\u003CSettings \u002F>} \u002F>\n  \u003C\u002FRoute>\n\u003C\u002FRoutes>\n\n\u002F\u002F DashboardLayout.jsx\nimport { Outlet } from 'react-router-dom';\n\nfunction DashboardLayout() {\n  return (\n    \u003Cdiv>\n      \u003CSidebar \u002F>\n      \u003Cmain>\n        \u003COutlet \u002F>  {\u002F* child route renders here *\u002F}\n      \u003C\u002Fmain>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n**Rule of thumb:** Use nested routes whenever multiple pages share a persistent layout (nav, sidebar, header) — the layout component stays mounted while only the `Outlet` content swaps.\n",{"id":49,"difficulty":33,"q":50,"a":51},"outlet-component","What is the Outlet component and when is it required?","**Outlet** is a placeholder rendered by a parent route's `element`; it marks the spot where the matched child route's component should appear. Without `Outlet`, child routes match in the URL but their elements are never rendered to the screen.\n\n```jsx\nimport { Outlet, NavLink } from 'react-router-dom';\n\nfunction AdminLayout() {\n  return (\n    \u003Cdiv className=\"admin\">\n      \u003Cnav>\n        \u003CNavLink to=\"users\">Users\u003C\u002FNavLink>\n        \u003CNavLink to=\"reports\">Reports\u003C\u002FNavLink>\n      \u003C\u002Fnav>\n      {\u002F* matched child route appears here *\u002F}\n      \u003COutlet \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n**Rule of thumb:** Every route that has children in the route tree must render `\u003COutlet \u002F>` somewhere in its element, or those children will silently not appear.\n",{"id":53,"difficulty":33,"q":54,"a":55},"index-routes","What is an index route and when should you use one?","An **index route** is a child route with `index={true}` instead of a `path`. It renders inside the parent's `Outlet` when the URL exactly matches the parent path — serving as the \"default child\" view.\n\n```jsx\n\u003CRoutes>\n  \u003CRoute path=\"\u002Fdashboard\" element={\u003CDashboardLayout \u002F>}>\n    {\u002F* renders at \u002Fdashboard when no child segment follows *\u002F}\n    \u003CRoute index element={\u003CDashboardHome \u002F>} \u002F>\n    \u003CRoute path=\"users\"   element={\u003CUsers \u002F>} \u002F>\n    \u003CRoute path=\"reports\" element={\u003CReports \u002F>} \u002F>\n  \u003C\u002FRoute>\n\u003C\u002FRoutes>\n```\n\n**Rule of thumb:** Add an index route to every layout route so the `Outlet` is never empty — without it, visiting the parent path exactly renders a blank content area.\n",{"id":57,"difficulty":14,"q":58,"a":59},"link-component","What is the Link component and why should you use it instead of an anchor tag?","**Link** renders an `\u003Ca>` element but intercepts the click, calls `history.pushState`, and re-renders the app without a page reload. A plain `\u003Ca href=\"...\">` would trigger a full browser navigation, destroying React state.\n\n```jsx\nimport { Link } from 'react-router-dom';\n\nfunction Nav() {\n  return (\n    \u003Cnav>\n      \u003CLink to=\"\u002F\">Home\u003C\u002FLink>           {\u002F* absolute path *\u002F}\n      \u003CLink to=\"settings\">Settings\u003C\u002FLink> {\u002F* relative to current route *\u002F}\n      \u003CLink to=\"\u002Fusers\u002F42\">User 42\u003C\u002FLink>\n    \u003C\u002Fnav>\n  );\n}\n```\n\n**Rule of thumb:** Always use `Link` (or `NavLink`) for in-app navigation; reserve plain `\u003Ca>` tags only for external URLs or files that require a real browser navigation.\n",{"id":61,"difficulty":33,"q":62,"a":63},"navlink-component","How does NavLink differ from Link, and how do you style the active state in v6?","**NavLink** is a `Link` that knows whether its destination is the current route. In v6 it automatically applies an `\"active\"` CSS class (and optionally `\"pending\"`) when matched. The v5 `activeClassName` \u002F `activeStyle` props were removed; instead, pass a **callback** to `className` or `style` that receives `{ isActive }`.\n\n```jsx\nimport { NavLink } from 'react-router-dom';\n\nfunction Nav() {\n  return (\n    \u003Cnav>\n      \u003CNavLink\n        to=\"\u002Fdashboard\"\n        className={({ isActive }) =>\n          isActive ? 'nav-link active' : 'nav-link'\n        }\n      >\n        Dashboard\n      \u003C\u002FNavLink>\n\n      {\u002F* or inline style callback *\u002F}\n      \u003CNavLink\n        to=\"\u002Fsettings\"\n        style={({ isActive }) => ({ fontWeight: isActive ? 700 : 400 })}\n      >\n        Settings\n      \u003C\u002FNavLink>\n    \u003C\u002Fnav>\n  );\n}\n```\n\n**Rule of thumb:** Use `NavLink` for navigation menus where visual feedback on the active item matters; use plain `Link` everywhere else.\n",{"id":65,"difficulty":33,"q":66,"a":67},"use-navigate-hook","How do you programmatically navigate in React Router v6?","The **useNavigate** hook returns a `navigate` function. Call it with a path string to push a new entry, or pass `{ replace: true }` to replace the current history entry (useful after form submissions). Negative numbers (`navigate(-1)`) go back in history.\n\n```jsx\nimport { useNavigate } from 'react-router-dom';\n\nfunction LoginForm() {\n  const navigate = useNavigate();\n\n  async function handleSubmit(e) {\n    e.preventDefault();\n    await login(formData);\n    \u002F\u002F push to dashboard after successful login\n    navigate('\u002Fdashboard');\n    \u002F\u002F or replace so the user can't go \"back\" to the login page:\n    \u002F\u002F navigate('\u002Fdashboard', { replace: true });\n  }\n\n  return \u003Cform onSubmit={handleSubmit}>...\u003C\u002Fform>;\n}\n```\n\n**Rule of thumb:** Use `navigate(path, { replace: true })` after any action that should not remain in the browser's history stack (login redirects, post-submit confirmations).\n",{"id":69,"difficulty":14,"q":70,"a":71},"catch-all-404-route","How do you create a 404 \u002F catch-all route in React Router v6?","Add a `\u003CRoute path=\"*\">` as the last child of your `Routes`. The wildcard `*` matches any URL not claimed by earlier routes, making it the conventional 404 handler.\n\n```jsx\nimport NotFound from '.\u002FNotFound';\n\nfunction App() {\n  return (\n    \u003CRoutes>\n      \u003CRoute path=\"\u002F\"       element={\u003CHome \u002F>} \u002F>\n      \u003CRoute path=\"\u002Fabout\"  element={\u003CAbout \u002F>} \u002F>\n      \u003CRoute path=\"\u002Fusers\u002F:id\" element={\u003CUserProfile \u002F>} \u002F>\n      {\u002F* catches everything else *\u002F}\n      \u003CRoute path=\"*\" element={\u003CNotFound \u002F>} \u002F>\n    \u003C\u002FRoutes>\n  );\n}\n```\n\n**Rule of thumb:** Always include a `path=\"*\"` route — without it, unmatched URLs render nothing, which silently looks broken to users.\n",{"id":73,"difficulty":33,"q":74,"a":75},"history-mode-vs-hash-mode","What is the difference between BrowserRouter (history mode) and HashRouter (hash mode)?","**BrowserRouter** uses the HTML5 **History API** (`pushState`) and produces clean URLs like `\u002Fabout`. It requires the server to serve `index.html` for every path. **HashRouter** encodes the route in the URL hash (`\u002F#\u002Fabout`) — the hash is never sent to the server, so it works on any static host without server config.\n\n```jsx\n\u002F\u002F History mode — clean URLs, needs server catch-all\nimport { BrowserRouter } from 'react-router-dom';\n\u003CBrowserRouter>\u003CApp \u002F>\u003C\u002FBrowserRouter>\n\n\u002F\u002F Hash mode — works on GitHub Pages \u002F plain file servers\nimport { HashRouter } from 'react-router-dom';\n\u003CHashRouter>\u003CApp \u002F>\u003C\u002FHashRouter>\n\n\u002F\u002F Server catch-all example (Express)\n\u002F\u002F app.get('*', (req, res) => res.sendFile('index.html'));\n```\n\n**Rule of thumb:** Prefer `BrowserRouter` with a server catch-all for production apps; use `HashRouter` only when you have no control over server configuration (e.g., GitHub Pages, local `file:\u002F\u002F` serving).\n",{"id":77,"difficulty":33,"q":78,"a":79},"scroll-restoration","How does scroll restoration work with React Router v6?","By default browsers try to restore scroll position, but client-side navigation breaks this because the DOM updates asynchronously. React Router v6 ships a **ScrollRestoration** component (data router only) that saves and restores scroll position per URL entry. For `BrowserRouter` apps, a common manual solution is a `ScrollToTop` component that calls `window.scrollTo(0, 0)` on route change.\n\n```jsx\n\u002F\u002F Data router approach (createBrowserRouter)\nimport { ScrollRestoration } from 'react-router-dom';\n\nfunction Root() {\n  return (\n    \u003C>\n      \u003CNav \u002F>\n      \u003COutlet \u002F>\n      \u003CScrollRestoration \u002F>  {\u002F* place once in the root layout *\u002F}\n    \u003C\u002F>\n  );\n}\n\n\u002F\u002F Manual approach for BrowserRouter\nimport { useEffect } from 'react';\nimport { useLocation } from 'react-router-dom';\n\nfunction ScrollToTop() {\n  const { pathname } = useLocation();\n  useEffect(() => { window.scrollTo(0, 0); }, [pathname]);\n  return null;\n}\n```\n\n**Rule of thumb:** Always handle scroll restoration explicitly — without it, users navigating back to a long page will be stranded at the bottom.\n",{"id":81,"difficulty":33,"q":82,"a":83},"relative-paths-nested-routes","What is the gotcha with relative paths in nested routes?","Child route `path` values inside a `\u003CRoute>` parent are **relative** — do not add a leading slash. A leading slash makes the path absolute, which breaks nesting because it is resolved from the root instead of relative to the parent.\n\n```jsx\n\u002F\u002F WRONG — leading slash makes children absolute paths\n\u003CRoute path=\"\u002Fsettings\" element={\u003CSettingsLayout \u002F>}>\n  \u003CRoute path=\"\u002Fsettings\u002Fprofile\"  element={\u003CProfile \u002F>} \u002F>  {\u002F* breaks *\u002F}\n  \u003CRoute path=\"\u002Fsettings\u002Fsecurity\" element={\u003CSecurity \u002F>} \u002F> {\u002F* breaks *\u002F}\n\u003C\u002FRoute>\n\n\u002F\u002F CORRECT — relative paths, no leading slash\n\u003CRoute path=\"\u002Fsettings\" element={\u003CSettingsLayout \u002F>}>\n  \u003CRoute path=\"profile\"  element={\u003CProfile \u002F>} \u002F>  {\u002F* \u002Fsettings\u002Fprofile *\u002F}\n  \u003CRoute path=\"security\" element={\u003CSecurity \u002F>} \u002F> {\u002F* \u002Fsettings\u002Fsecurity *\u002F}\n\u003C\u002FRoute>\n```\n\n**Rule of thumb:** Never prefix child route paths with `\u002F` — keep them relative so React Router can compose parent + child segments correctly.\n",{"id":85,"difficulty":14,"q":86,"a":87},"use-location-hook","What does the useLocation hook return and when would you use it?","**useLocation** returns the current **location object** with `pathname`, `search`, `hash`, `state`, and `key`. It is useful for reading query params, animating on route change, or passing state between routes without putting it in the URL.\n\n```jsx\nimport { useLocation } from 'react-router-dom';\n\nfunction Analytics() {\n  const location = useLocation();\n\n  useEffect(() => {\n    \u002F\u002F fire a page-view event on every navigation\n    trackPageView(location.pathname);\n  }, [location.pathname]);\n\n  return null;\n}\n\n\u002F\u002F Passing state via Link and reading it with useLocation\n\u003CLink to=\"\u002Fconfirm\" state={{ orderId: 42 }}>Confirm\u003C\u002FLink>\n\nfunction ConfirmPage() {\n  const { state } = useLocation();\n  return \u003Cp>Order {state?.orderId} confirmed\u003C\u002Fp>;\n}\n```\n\n**Rule of thumb:** Use `useLocation` whenever you need to react to URL changes without controlling the route — analytics, animations, and reading navigation state are the classic cases.\n",{"id":89,"difficulty":14,"q":90,"a":91},"use-params-hook","How do you read dynamic URL segments in React Router v6?","Declare a dynamic segment in the route path with a colon prefix (`:paramName`). Inside the matched component, read it with the **useParams** hook, which returns an object keyed by every named segment in the route.\n\n```jsx\n\u002F\u002F Route declaration\n\u003CRoute path=\"\u002Fusers\u002F:userId\u002Fposts\u002F:postId\" element={\u003CPost \u002F>} \u002F>\n\n\u002F\u002F Component\nimport { useParams } from 'react-router-dom';\n\nfunction Post() {\n  const { userId, postId } = useParams();\n  \u002F\u002F userId and postId are always strings — convert if needed\n  return \u003Cp>User {userId}, Post {postId}\u003C\u002Fp>;\n}\n```\n\n**Rule of thumb:** Always coerce URL params to the correct type (`Number(userId)`) before using them in logic — `useParams` always returns strings regardless of what you stored.\n",{"id":93,"difficulty":33,"q":94,"a":95},"navigate-replace-vs-push","When should you use navigate with replace: true versus a normal push?","A normal `navigate(path)` **pushes** a new entry onto the history stack, so the user can press Back to return. `navigate(path, { replace: true })` **replaces** the current entry, removing it from the stack so Back skips it.\n\n```jsx\nimport { useNavigate } from 'react-router-dom';\n\nfunction CheckoutSuccess() {\n  const navigate = useNavigate();\n\n  \u002F\u002F After payment, replace history so pressing Back\n  \u002F\u002F doesn't return to the payment form\n  useEffect(() => {\n    navigate('\u002Forder-confirmation', { replace: true });\n  }, []);\n\n  return null;\n}\n\n\u002F\u002F Also useful for auth redirects:\n\u002F\u002F navigate('\u002Flogin', { replace: true });\n\u002F\u002F — user can't go \"back\" to the protected page after logout\n```\n\n**Rule of thumb:** Use `replace: true` after any action that should be \"final\" in the history stack — payment success, login\u002Flogout, and post-submission confirmations are the standard cases.\n",{"id":97,"difficulty":14,"q":98,"a":99},"link-to-prop-types","What values can you pass to the \"to\" prop of Link?","The `to` prop accepts a **string** (path, with optional query\u002Fhash), a **partial location object**, or a **relative string**. Relative paths are resolved against the current route's URL segment, making them useful inside nested route trees.\n\n```jsx\nimport { Link } from 'react-router-dom';\n\nfunction Examples() {\n  return (\n    \u003C>\n      {\u002F* absolute string *\u002F}\n      \u003CLink to=\"\u002Fusers\">Users\u003C\u002FLink>\n\n      {\u002F* string with query + hash *\u002F}\n      \u003CLink to=\"\u002Fsearch?q=react#results\">Search\u003C\u002FLink>\n\n      {\u002F* location object for programmatic control *\u002F}\n      \u003CLink to={{ pathname: '\u002Fusers', search: '?page=2' }}>Page 2\u003C\u002FLink>\n\n      {\u002F* relative — goes up one segment then to \"edit\" *\u002F}\n      \u003CLink to=\"..\u002Fedit\">Edit\u003C\u002FLink>\n    \u003C\u002F>\n  );\n}\n```\n\n**Rule of thumb:** Prefer string `to` values for simplicity; switch to the object form only when you need to set `search`, `hash`, or `state` independently.\n",{"id":101,"difficulty":14,"q":102,"a":103},"routes-outside-router","What error do you get when you use a React Router hook outside of a Router, and how do you fix it?","Any React Router hook (`useNavigate`, `useLocation`, `useParams`, etc.) throws **\"useNavigate() may be used only in the context of a Router component\"** (or similar) when called outside the `BrowserRouter` \u002F `RouterProvider` tree. The fix is always to ensure the Router wraps the component tree at or above the point where the hook is called.\n\n```jsx\n\u002F\u002F WRONG — hook runs outside the Router tree\nfunction App() {\n  const navigate = useNavigate(); \u002F\u002F throws!\n  return \u003CBrowserRouter>...\u003C\u002FBrowserRouter>;\n}\n\n\u002F\u002F CORRECT — Router wraps everything that uses routing hooks\nfunction Root() {\n  return (\n    \u003CBrowserRouter>\n      \u003CApp \u002F>  {\u002F* App and all descendants can now use hooks *\u002F}\n    \u003C\u002FBrowserRouter>\n  );\n}\n\nfunction App() {\n  const navigate = useNavigate(); \u002F\u002F works fine here\n  return \u003CRoutes>...\u003C\u002FRoutes>;\n}\n```\n\n**Rule of thumb:** If you see a Router context error, trace the component tree upward — the component calling the hook is not a descendant of any `BrowserRouter` or `RouterProvider`.\n",20,null,{"description":11},"React Router v6 routing basics interview questions — BrowserRouter, Route, Link, NavLink, Outlet, nested routes, index routes, useNavigate, and catch-all 404 routes.","react\u002Frouting\u002Frouting-basics","Routing","routing","2026-06-24","aWZVzujf-dZeSv_aUKLbBl_U0vburev-ArANL2qZ1MU",[114,115,118,122],{"subtopic":6,"path":21,"order":20},{"subtopic":116,"path":117,"order":12},"Dynamic and Nested Routes","\u002Freact\u002Frouting\u002Fdynamic-nested-routes",{"subtopic":119,"path":120,"order":121},"Navigation Hooks","\u002Freact\u002Frouting\u002Fnavigation-hooks",3,{"subtopic":123,"path":124,"order":125},"Protected Routes","\u002Freact\u002Frouting\u002Fprotected-routes",4,{"path":127,"title":128},"\u002Fblog\u002Freact-routing-basics-guide","React Router v6 Routing Basics — Complete Interview Guide",1782244101031]