[{"data":1,"prerenderedAt":2040},["ShallowReactive",2],{"blog-\u002Fblog\u002Freact-routing-basics-guide":3},{"id":4,"title":5,"body":6,"description":2025,"difficulty":2026,"extension":2027,"framework":2028,"frameworkSlug":2029,"meta":2030,"navigation":157,"order":70,"path":2031,"qaPath":2032,"seo":2033,"stem":2034,"subtopic":2035,"topic":2036,"topicSlug":2037,"updated":2038,"__hash__":2039},"blog\u002Fblog\u002Freact-routing-basics-guide.md","React Router v6 Routing Basics — Complete Interview Guide",{"type":7,"value":8,"toc":2013},"minimark",[9,13,18,21,42,53,57,82,89,233,244,463,471,475,497,678,689,767,771,785,816,1077,1086,1090,1110,1418,1439,1443,1460,1580,1590,1594,1609,1756,1766,1770,1780,1873,1876,1880,1900,1910,1914,2010],[10,11,12],"p",{},"React Router v6 is the standard routing solution for React SPAs, and it appears in almost every mid-to-senior frontend interview. This guide covers everything you need to know to answer routing questions confidently — from the mental model behind client-side routing through the specific API changes that tripped up developers migrating from v5.",[14,15,17],"h2",{"id":16},"why-client-side-routing-exists","Why Client-Side Routing Exists",[10,19,20],{},"A traditional multi-page app works by making a full HTTP request for every URL. The browser discards the current DOM, fetches a new HTML document from the server, and re-paints the page. That model is simple but has a hard cost: every navigation throws away in-memory state, re-downloads shared assets, and flashes a blank screen while the network round-trip completes.",[10,22,23,24,28,29,32,33,37,38,41],{},"React applications are built around a persistent component tree that manages state in memory. ",[25,26,27],"strong",{},"Client-side routing"," preserves that tree across navigations. When a user clicks a link, JavaScript intercepts the click, calls the browser's ",[25,30,31],{},"History API"," (",[34,35,36],"code",{},"pushState"," or ",[34,39,40],{},"replaceState",") to update the URL bar, and then re-renders only the parts of the component tree that need to change. The network is never involved.",[10,43,44,45,48,49,52],{},"The result is navigation that feels instant because it is instant — no network latency, no full repaint, no lost scroll position in the parts of the page that didn't change. The tradeoff is that the server must be configured to serve ",[34,46,47],{},"index.html"," for every URL, since there is no server-side route handler for paths like ",[34,50,51],{},"\u002Fusers\u002F42",".",[14,54,56],{"id":55},"installing-and-setting-up-react-router-v6","Installing and Setting Up React Router v6",[58,59,64],"pre",{"className":60,"code":61,"language":62,"meta":63,"style":63},"language-bash shiki shiki-themes github-light github-dark","npm install react-router-dom\n","bash","",[34,65,66],{"__ignoreMap":63},[67,68,71,75,79],"span",{"class":69,"line":70},"line",1,[67,72,74],{"class":73},"sScJk","npm",[67,76,78],{"class":77},"sZZnC"," install",[67,80,81],{"class":77}," react-router-dom\n",[10,83,84,85,88],{},"There are two setup styles in v6. The simpler one wraps your app in ",[25,86,87],{},"BrowserRouter",", a React context provider that makes routing hooks available to every descendant:",[58,90,94],{"className":91,"code":92,"language":93,"meta":63,"style":63},"language-jsx shiki shiki-themes github-light github-dark","\u002F\u002F main.jsx\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* routing context for the entire tree *\u002F}\n    \u003CApp \u002F>\n  \u003C\u002FBrowserRouter>\n);\n","jsx",[34,95,96,102,122,137,152,159,186,204,216,227],{"__ignoreMap":63},[67,97,98],{"class":69,"line":70},[67,99,101],{"class":100},"sJ8bj","\u002F\u002F main.jsx\n",[67,103,105,109,113,116,119],{"class":69,"line":104},2,[67,106,108],{"class":107},"szBVR","import",[67,110,112],{"class":111},"sVt8B"," { BrowserRouter } ",[67,114,115],{"class":107},"from",[67,117,118],{"class":77}," 'react-router-dom'",[67,120,121],{"class":111},";\n",[67,123,125,127,130,132,135],{"class":69,"line":124},3,[67,126,108],{"class":107},[67,128,129],{"class":111}," { createRoot } ",[67,131,115],{"class":107},[67,133,134],{"class":77}," 'react-dom\u002Fclient'",[67,136,121],{"class":111},[67,138,140,142,145,147,150],{"class":69,"line":139},4,[67,141,108],{"class":107},[67,143,144],{"class":111}," App ",[67,146,115],{"class":107},[67,148,149],{"class":77}," '.\u002FApp'",[67,151,121],{"class":111},[67,153,155],{"class":69,"line":154},5,[67,156,158],{"emptyLinePlaceholder":157},true,"\n",[67,160,162,165,168,171,174,177,180,183],{"class":69,"line":161},6,[67,163,164],{"class":73},"createRoot",[67,166,167],{"class":111},"(document.",[67,169,170],{"class":73},"getElementById",[67,172,173],{"class":111},"(",[67,175,176],{"class":77},"'root'",[67,178,179],{"class":111},")).",[67,181,182],{"class":73},"render",[67,184,185],{"class":111},"(\n",[67,187,189,192,195,198,201],{"class":69,"line":188},7,[67,190,191],{"class":111},"  \u003C",[67,193,87],{"class":194},"sj4cs",[67,196,197],{"class":111},">   {",[67,199,200],{"class":100},"\u002F* routing context for the entire tree *\u002F",[67,202,203],{"class":111},"}\n",[67,205,207,210,213],{"class":69,"line":206},8,[67,208,209],{"class":111},"    \u003C",[67,211,212],{"class":194},"App",[67,214,215],{"class":111}," \u002F>\n",[67,217,219,222,224],{"class":69,"line":218},9,[67,220,221],{"class":111},"  \u003C\u002F",[67,223,87],{"class":194},[67,225,226],{"class":111},">\n",[67,228,230],{"class":69,"line":229},10,[67,231,232],{"class":111},");\n",[10,234,235,236,239,240,243],{},"The v6.4+ approach uses ",[25,237,238],{},"createBrowserRouter"," and ",[25,241,242],{},"RouterProvider",", which unlocks the data router features (loaders, actions, fetchers). It is the recommended path for new projects:",[58,245,247],{"className":91,"code":246,"language":93,"meta":63,"style":63},"import { 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 shell with \u003COutlet \u002F>\n    children: [\n      { index: true, element: \u003CHome \u002F> },    \u002F\u002F default child at \"\u002F\"\n      { path: 'about', element: \u003CAbout \u002F> }, \u002F\u002F \"\u002Fabout\"\n    ],\n  },\n]);\n\ncreateRoot(document.getElementById('root')).render(\n  \u003CRouterProvider router={router} \u002F>\n);\n",[34,248,249,262,276,290,304,308,325,330,341,355,360,381,401,407,413,419,424,443,458],{"__ignoreMap":63},[67,250,251,253,256,258,260],{"class":69,"line":70},[67,252,108],{"class":107},[67,254,255],{"class":111}," { createBrowserRouter, RouterProvider } ",[67,257,115],{"class":107},[67,259,118],{"class":77},[67,261,121],{"class":111},[67,263,264,266,269,271,274],{"class":69,"line":104},[67,265,108],{"class":107},[67,267,268],{"class":111}," Root ",[67,270,115],{"class":107},[67,272,273],{"class":77}," '.\u002FRoot'",[67,275,121],{"class":111},[67,277,278,280,283,285,288],{"class":69,"line":124},[67,279,108],{"class":107},[67,281,282],{"class":111}," Home ",[67,284,115],{"class":107},[67,286,287],{"class":77}," '.\u002FHome'",[67,289,121],{"class":111},[67,291,292,294,297,299,302],{"class":69,"line":139},[67,293,108],{"class":107},[67,295,296],{"class":111}," About ",[67,298,115],{"class":107},[67,300,301],{"class":77}," '.\u002FAbout'",[67,303,121],{"class":111},[67,305,306],{"class":69,"line":154},[67,307,158],{"emptyLinePlaceholder":157},[67,309,310,313,316,319,322],{"class":69,"line":161},[67,311,312],{"class":107},"const",[67,314,315],{"class":194}," router",[67,317,318],{"class":107}," =",[67,320,321],{"class":73}," createBrowserRouter",[67,323,324],{"class":111},"([\n",[67,326,327],{"class":69,"line":188},[67,328,329],{"class":111},"  {\n",[67,331,332,335,338],{"class":69,"line":206},[67,333,334],{"class":111},"    path: ",[67,336,337],{"class":77},"'\u002F'",[67,339,340],{"class":111},",\n",[67,342,343,346,349,352],{"class":69,"line":218},[67,344,345],{"class":111},"    element: \u003C",[67,347,348],{"class":194},"Root",[67,350,351],{"class":111}," \u002F>,       ",[67,353,354],{"class":100},"\u002F\u002F layout shell with \u003COutlet \u002F>\n",[67,356,357],{"class":69,"line":229},[67,358,359],{"class":111},"    children: [\n",[67,361,363,366,369,372,375,378],{"class":69,"line":362},11,[67,364,365],{"class":111},"      { index: ",[67,367,368],{"class":194},"true",[67,370,371],{"class":111},", element: \u003C",[67,373,374],{"class":194},"Home",[67,376,377],{"class":111}," \u002F> },    ",[67,379,380],{"class":100},"\u002F\u002F default child at \"\u002F\"\n",[67,382,384,387,390,392,395,398],{"class":69,"line":383},12,[67,385,386],{"class":111},"      { path: ",[67,388,389],{"class":77},"'about'",[67,391,371],{"class":111},[67,393,394],{"class":194},"About",[67,396,397],{"class":111}," \u002F> }, ",[67,399,400],{"class":100},"\u002F\u002F \"\u002Fabout\"\n",[67,402,404],{"class":69,"line":403},13,[67,405,406],{"class":111},"    ],\n",[67,408,410],{"class":69,"line":409},14,[67,411,412],{"class":111},"  },\n",[67,414,416],{"class":69,"line":415},15,[67,417,418],{"class":111},"]);\n",[67,420,422],{"class":69,"line":421},16,[67,423,158],{"emptyLinePlaceholder":157},[67,425,427,429,431,433,435,437,439,441],{"class":69,"line":426},17,[67,428,164],{"class":73},[67,430,167],{"class":111},[67,432,170],{"class":73},[67,434,173],{"class":111},[67,436,176],{"class":77},[67,438,179],{"class":111},[67,440,182],{"class":73},[67,442,185],{"class":111},[67,444,446,448,450,452,455],{"class":69,"line":445},18,[67,447,191],{"class":111},[67,449,242],{"class":194},[67,451,315],{"class":73},[67,453,454],{"class":107},"=",[67,456,457],{"class":111},"{router} \u002F>\n",[67,459,461],{"class":69,"line":460},19,[67,462,232],{"class":111},[10,464,465,466,468,469,52],{},"For interview purposes, know both forms. Most existing codebases still use ",[34,467,87],{},"; most new projects should prefer ",[34,470,238],{},[14,472,474],{"id":473},"core-concept-routes-and-route","Core Concept: Routes and Route",[10,476,477,480,481,484,485,488,489,492,493,496],{},[25,478,479],{},"Routes"," scans its ",[25,482,483],{},"Route"," children and renders the one whose ",[34,486,487],{},"path"," best matches the current URL. In v6, every route matches ",[25,490,491],{},"exactly"," by default — the ",[34,494,495],{},"exact"," prop from v5 was removed entirely. Route ranking is based on specificity: more-specific paths win over wildcards, and static segments win over dynamic ones.",[58,498,500],{"className":91,"code":499,"language":93,"meta":63,"style":63},"import { Routes, Route } from 'react-router-dom';\n\nfunction App() {\n  return (\n    \u003CRoutes>\n      \u003CRoute path=\"\u002F\"           element={\u003CHome \u002F>} \u002F>\n      \u003CRoute path=\"\u002Fusers\"      element={\u003CUserList \u002F>} \u002F>\n      \u003CRoute path=\"\u002Fusers\u002F:id\"  element={\u003CUserDetail \u002F>} \u002F>  {\u002F* beats \u002Fusers for \u002Fusers\u002F42 *\u002F}\n      \u003CRoute path=\"*\"           element={\u003CNotFound \u002F>} \u002F>    {\u002F* catch-all 404 *\u002F}\n    \u003C\u002FRoutes>\n  );\n}\n",[34,501,502,515,519,530,538,546,574,599,630,660,669,674],{"__ignoreMap":63},[67,503,504,506,509,511,513],{"class":69,"line":70},[67,505,108],{"class":107},[67,507,508],{"class":111}," { Routes, Route } ",[67,510,115],{"class":107},[67,512,118],{"class":77},[67,514,121],{"class":111},[67,516,517],{"class":69,"line":104},[67,518,158],{"emptyLinePlaceholder":157},[67,520,521,524,527],{"class":69,"line":124},[67,522,523],{"class":107},"function",[67,525,526],{"class":73}," App",[67,528,529],{"class":111},"() {\n",[67,531,532,535],{"class":69,"line":139},[67,533,534],{"class":107},"  return",[67,536,537],{"class":111}," (\n",[67,539,540,542,544],{"class":69,"line":154},[67,541,209],{"class":111},[67,543,479],{"class":194},[67,545,226],{"class":111},[67,547,548,551,553,556,558,561,564,566,569,571],{"class":69,"line":161},[67,549,550],{"class":111},"      \u003C",[67,552,483],{"class":194},[67,554,555],{"class":73}," path",[67,557,454],{"class":107},[67,559,560],{"class":77},"\"\u002F\"",[67,562,563],{"class":73},"           element",[67,565,454],{"class":107},[67,567,568],{"class":111},"{\u003C",[67,570,374],{"class":194},[67,572,573],{"class":111}," \u002F>} \u002F>\n",[67,575,576,578,580,582,584,587,590,592,594,597],{"class":69,"line":188},[67,577,550],{"class":111},[67,579,483],{"class":194},[67,581,555],{"class":73},[67,583,454],{"class":107},[67,585,586],{"class":77},"\"\u002Fusers\"",[67,588,589],{"class":73},"      element",[67,591,454],{"class":107},[67,593,568],{"class":111},[67,595,596],{"class":194},"UserList",[67,598,573],{"class":111},[67,600,601,603,605,607,609,612,615,617,619,622,625,628],{"class":69,"line":206},[67,602,550],{"class":111},[67,604,483],{"class":194},[67,606,555],{"class":73},[67,608,454],{"class":107},[67,610,611],{"class":77},"\"\u002Fusers\u002F:id\"",[67,613,614],{"class":73},"  element",[67,616,454],{"class":107},[67,618,568],{"class":111},[67,620,621],{"class":194},"UserDetail",[67,623,624],{"class":111}," \u002F>} \u002F>  {",[67,626,627],{"class":100},"\u002F* beats \u002Fusers for \u002Fusers\u002F42 *\u002F",[67,629,203],{"class":111},[67,631,632,634,636,638,640,643,645,647,649,652,655,658],{"class":69,"line":218},[67,633,550],{"class":111},[67,635,483],{"class":194},[67,637,555],{"class":73},[67,639,454],{"class":107},[67,641,642],{"class":77},"\"*\"",[67,644,563],{"class":73},[67,646,454],{"class":107},[67,648,568],{"class":111},[67,650,651],{"class":194},"NotFound",[67,653,654],{"class":111}," \u002F>} \u002F>    {",[67,656,657],{"class":100},"\u002F* catch-all 404 *\u002F",[67,659,203],{"class":111},[67,661,662,665,667],{"class":69,"line":229},[67,663,664],{"class":111},"    \u003C\u002F",[67,666,479],{"class":194},[67,668,226],{"class":111},[67,670,671],{"class":69,"line":362},[67,672,673],{"class":111},"  );\n",[67,675,676],{"class":69,"line":383},[67,677,203],{"class":111},[10,679,680,681,684,685,688],{},"Dynamic segments (",[34,682,683],{},":id",") are accessible inside the rendered component via the ",[25,686,687],{},"useParams"," hook:",[58,690,692],{"className":91,"code":691,"language":93,"meta":63,"style":63},"import { useParams } from 'react-router-dom';\n\nfunction UserDetail() {\n  const { id } = useParams();  \u002F\u002F always a string\n  return \u003Cp>User ID: {id}\u003C\u002Fp>;\n}\n",[34,693,694,707,711,720,745,763],{"__ignoreMap":63},[67,695,696,698,701,703,705],{"class":69,"line":70},[67,697,108],{"class":107},[67,699,700],{"class":111}," { useParams } ",[67,702,115],{"class":107},[67,704,118],{"class":77},[67,706,121],{"class":111},[67,708,709],{"class":69,"line":104},[67,710,158],{"emptyLinePlaceholder":157},[67,712,713,715,718],{"class":69,"line":124},[67,714,523],{"class":107},[67,716,717],{"class":73}," UserDetail",[67,719,529],{"class":111},[67,721,722,725,728,731,734,736,739,742],{"class":69,"line":139},[67,723,724],{"class":107},"  const",[67,726,727],{"class":111}," { ",[67,729,730],{"class":194},"id",[67,732,733],{"class":111}," } ",[67,735,454],{"class":107},[67,737,738],{"class":73}," useParams",[67,740,741],{"class":111},"();  ",[67,743,744],{"class":100},"\u002F\u002F always a string\n",[67,746,747,749,752,755,758,760],{"class":69,"line":154},[67,748,534],{"class":107},[67,750,751],{"class":111}," \u003C",[67,753,10],{"class":754},"s9eBZ",[67,756,757],{"class":111},">User ID: {id}\u003C\u002F",[67,759,10],{"class":754},[67,761,762],{"class":111},">;\n",[67,764,765],{"class":69,"line":161},[67,766,203],{"class":111},[14,768,770],{"id":769},"navigation-link-and-navlink","Navigation: Link and NavLink",[10,772,773,776,777,780,781,784],{},[25,774,775],{},"Link"," renders an ",[34,778,779],{},"\u003Ca>"," that intercepts clicks and performs a client-side navigation. Never use a plain ",[34,782,783],{},"\u003Ca href>"," for in-app navigation — it bypasses the router and triggers a full page reload.",[10,786,787,790,791,793,794,239,797,800,801,804,805,37,808,811,812,815],{},[25,788,789],{},"NavLink"," is a ",[34,792,775],{}," that knows whether its destination is currently active. In v6, the ",[34,795,796],{},"activeClassName",[34,798,799],{},"activeStyle"," props from v5 were removed. Instead, pass a ",[25,802,803],{},"callback"," to ",[34,806,807],{},"className",[34,809,810],{},"style"," that receives an ",[34,813,814],{},"{ isActive }"," object:",[58,817,819],{"className":91,"code":818,"language":93,"meta":63,"style":63},"import { Link, NavLink } from 'react-router-dom';\n\nfunction Navigation() {\n  return (\n    \u003Cnav>\n      {\u002F* basic link — no active styling *\u002F}\n      \u003CLink to=\"\u002F\">Home\u003C\u002FLink>\n\n      {\u002F* NavLink with active class callback *\u002F}\n      \u003CNavLink\n        to=\"\u002Fdashboard\"\n        className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}\n      >\n        Dashboard\n      \u003C\u002FNavLink>\n\n      {\u002F* NavLink with active 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",[34,820,821,834,838,847,853,862,872,892,896,905,912,922,959,964,969,978,982,991,997,1006,1038,1043,1049,1058,1067,1072],{"__ignoreMap":63},[67,822,823,825,828,830,832],{"class":69,"line":70},[67,824,108],{"class":107},[67,826,827],{"class":111}," { Link, NavLink } ",[67,829,115],{"class":107},[67,831,118],{"class":77},[67,833,121],{"class":111},[67,835,836],{"class":69,"line":104},[67,837,158],{"emptyLinePlaceholder":157},[67,839,840,842,845],{"class":69,"line":124},[67,841,523],{"class":107},[67,843,844],{"class":73}," Navigation",[67,846,529],{"class":111},[67,848,849,851],{"class":69,"line":139},[67,850,534],{"class":107},[67,852,537],{"class":111},[67,854,855,857,860],{"class":69,"line":154},[67,856,209],{"class":111},[67,858,859],{"class":754},"nav",[67,861,226],{"class":111},[67,863,864,867,870],{"class":69,"line":161},[67,865,866],{"class":111},"      {",[67,868,869],{"class":100},"\u002F* basic link — no active styling *\u002F",[67,871,203],{"class":111},[67,873,874,876,878,881,883,885,888,890],{"class":69,"line":188},[67,875,550],{"class":111},[67,877,775],{"class":194},[67,879,880],{"class":73}," to",[67,882,454],{"class":107},[67,884,560],{"class":77},[67,886,887],{"class":111},">Home\u003C\u002F",[67,889,775],{"class":194},[67,891,226],{"class":111},[67,893,894],{"class":69,"line":206},[67,895,158],{"emptyLinePlaceholder":157},[67,897,898,900,903],{"class":69,"line":218},[67,899,866],{"class":111},[67,901,902],{"class":100},"\u002F* NavLink with active class callback *\u002F",[67,904,203],{"class":111},[67,906,907,909],{"class":69,"line":229},[67,908,550],{"class":111},[67,910,911],{"class":194},"NavLink\n",[67,913,914,917,919],{"class":69,"line":362},[67,915,916],{"class":73},"        to",[67,918,454],{"class":107},[67,920,921],{"class":77},"\"\u002Fdashboard\"\n",[67,923,924,927,929,932,936,939,942,945,948,951,954,957],{"class":69,"line":383},[67,925,926],{"class":73},"        className",[67,928,454],{"class":107},[67,930,931],{"class":111},"{({ ",[67,933,935],{"class":934},"s4XuR","isActive",[67,937,938],{"class":111}," }) ",[67,940,941],{"class":107},"=>",[67,943,944],{"class":111}," isActive ",[67,946,947],{"class":107},"?",[67,949,950],{"class":77}," 'nav-link active'",[67,952,953],{"class":107}," :",[67,955,956],{"class":77}," 'nav-link'",[67,958,203],{"class":111},[67,960,961],{"class":69,"line":403},[67,962,963],{"class":111},"      >\n",[67,965,966],{"class":69,"line":409},[67,967,968],{"class":111},"        Dashboard\n",[67,970,971,974,976],{"class":69,"line":415},[67,972,973],{"class":111},"      \u003C\u002F",[67,975,789],{"class":194},[67,977,226],{"class":111},[67,979,980],{"class":69,"line":421},[67,981,158],{"emptyLinePlaceholder":157},[67,983,984,986,989],{"class":69,"line":426},[67,985,866],{"class":111},[67,987,988],{"class":100},"\u002F* NavLink with active style callback *\u002F",[67,990,203],{"class":111},[67,992,993,995],{"class":69,"line":445},[67,994,550],{"class":111},[67,996,911],{"class":194},[67,998,999,1001,1003],{"class":69,"line":460},[67,1000,916],{"class":73},[67,1002,454],{"class":107},[67,1004,1005],{"class":77},"\"\u002Fsettings\"\n",[67,1007,1009,1012,1014,1016,1018,1020,1022,1025,1027,1030,1032,1035],{"class":69,"line":1008},20,[67,1010,1011],{"class":73},"        style",[67,1013,454],{"class":107},[67,1015,931],{"class":111},[67,1017,935],{"class":934},[67,1019,938],{"class":111},[67,1021,941],{"class":107},[67,1023,1024],{"class":111}," ({ fontWeight: isActive ",[67,1026,947],{"class":107},[67,1028,1029],{"class":194}," 700",[67,1031,953],{"class":107},[67,1033,1034],{"class":194}," 400",[67,1036,1037],{"class":111}," })}\n",[67,1039,1041],{"class":69,"line":1040},21,[67,1042,963],{"class":111},[67,1044,1046],{"class":69,"line":1045},22,[67,1047,1048],{"class":111},"        Settings\n",[67,1050,1052,1054,1056],{"class":69,"line":1051},23,[67,1053,973],{"class":111},[67,1055,789],{"class":194},[67,1057,226],{"class":111},[67,1059,1061,1063,1065],{"class":69,"line":1060},24,[67,1062,664],{"class":111},[67,1064,859],{"class":754},[67,1066,226],{"class":111},[67,1068,1070],{"class":69,"line":1069},25,[67,1071,673],{"class":111},[67,1073,1075],{"class":69,"line":1074},26,[67,1076,203],{"class":111},[10,1078,1079,1080,1082,1083,1085],{},"Use ",[34,1081,789],{}," in menus and sidebars; use plain ",[34,1084,775],{}," for inline text or buttons that navigate.",[14,1087,1089],{"id":1088},"nested-routes-and-outlet","Nested Routes and Outlet",[10,1091,1092,1095,1096,1098,1099,1101,1102,1105,1106,1109],{},[25,1093,1094],{},"Nested routes"," let you co-locate a persistent layout with its child views. Declare child routes inside a parent ",[34,1097,483],{}," element — their ",[34,1100,487],{}," values are ",[25,1103,1104],{},"relative"," (no leading slash). The parent component renders an ",[25,1107,1108],{},"Outlet"," to mark where the active child should appear:",[58,1111,1113],{"className":91,"code":1112,"language":93,"meta":63,"style":63},"\u002F\u002F Route tree\n\u003CRoutes>\n  \u003CRoute path=\"\u002Fdashboard\" element={\u003CDashboardLayout \u002F>}>\n    \u003CRoute index element={\u003CDashboardHome \u002F>} \u002F>      {\u002F* \u002Fdashboard *\u002F}\n    \u003CRoute path=\"analytics\" element={\u003CAnalytics \u002F>} \u002F> {\u002F* \u002Fdashboard\u002Fanalytics *\u002F}\n    \u003CRoute path=\"settings\"  element={\u003CSettings \u002F>} \u002F>  {\u002F* \u002Fdashboard\u002Fsettings *\u002F}\n  \u003C\u002FRoute>\n\u003C\u002FRoutes>\n\n\u002F\u002F DashboardLayout.jsx\nimport { Outlet, NavLink } from 'react-router-dom';\n\nfunction DashboardLayout() {\n  return (\n    \u003Cdiv className=\"dashboard\">\n      \u003Caside>\n        \u003CNavLink to=\"analytics\">Analytics\u003C\u002FNavLink>\n        \u003CNavLink to=\"settings\">Settings\u003C\u002FNavLink>\n      \u003C\u002Faside>\n      \u003Cmain>\n        \u003COutlet \u002F>  {\u002F* child route renders here; layout stays mounted *\u002F}\n      \u003C\u002Fmain>\n    \u003C\u002Fdiv>\n  );\n}\n",[34,1114,1115,1120,1129,1155,1181,1211,1240,1248,1257,1261,1266,1279,1283,1292,1298,1315,1324,1344,1363,1371,1380,1394,1402,1410,1414],{"__ignoreMap":63},[67,1116,1117],{"class":69,"line":70},[67,1118,1119],{"class":100},"\u002F\u002F Route tree\n",[67,1121,1122,1125,1127],{"class":69,"line":104},[67,1123,1124],{"class":111},"\u003C",[67,1126,479],{"class":194},[67,1128,226],{"class":111},[67,1130,1131,1133,1135,1137,1139,1142,1145,1147,1149,1152],{"class":69,"line":124},[67,1132,191],{"class":111},[67,1134,483],{"class":194},[67,1136,555],{"class":73},[67,1138,454],{"class":107},[67,1140,1141],{"class":77},"\"\u002Fdashboard\"",[67,1143,1144],{"class":73}," element",[67,1146,454],{"class":107},[67,1148,568],{"class":111},[67,1150,1151],{"class":194},"DashboardLayout",[67,1153,1154],{"class":111}," \u002F>}>\n",[67,1156,1157,1159,1161,1164,1166,1168,1170,1173,1176,1179],{"class":69,"line":139},[67,1158,209],{"class":111},[67,1160,483],{"class":194},[67,1162,1163],{"class":73}," index",[67,1165,1144],{"class":73},[67,1167,454],{"class":107},[67,1169,568],{"class":111},[67,1171,1172],{"class":194},"DashboardHome",[67,1174,1175],{"class":111}," \u002F>} \u002F>      {",[67,1177,1178],{"class":100},"\u002F* \u002Fdashboard *\u002F",[67,1180,203],{"class":111},[67,1182,1183,1185,1187,1189,1191,1194,1196,1198,1200,1203,1206,1209],{"class":69,"line":154},[67,1184,209],{"class":111},[67,1186,483],{"class":194},[67,1188,555],{"class":73},[67,1190,454],{"class":107},[67,1192,1193],{"class":77},"\"analytics\"",[67,1195,1144],{"class":73},[67,1197,454],{"class":107},[67,1199,568],{"class":111},[67,1201,1202],{"class":194},"Analytics",[67,1204,1205],{"class":111}," \u002F>} \u002F> {",[67,1207,1208],{"class":100},"\u002F* \u002Fdashboard\u002Fanalytics *\u002F",[67,1210,203],{"class":111},[67,1212,1213,1215,1217,1219,1221,1224,1226,1228,1230,1233,1235,1238],{"class":69,"line":161},[67,1214,209],{"class":111},[67,1216,483],{"class":194},[67,1218,555],{"class":73},[67,1220,454],{"class":107},[67,1222,1223],{"class":77},"\"settings\"",[67,1225,614],{"class":73},[67,1227,454],{"class":107},[67,1229,568],{"class":111},[67,1231,1232],{"class":194},"Settings",[67,1234,624],{"class":111},[67,1236,1237],{"class":100},"\u002F* \u002Fdashboard\u002Fsettings *\u002F",[67,1239,203],{"class":111},[67,1241,1242,1244,1246],{"class":69,"line":188},[67,1243,221],{"class":111},[67,1245,483],{"class":194},[67,1247,226],{"class":111},[67,1249,1250,1253,1255],{"class":69,"line":206},[67,1251,1252],{"class":111},"\u003C\u002F",[67,1254,479],{"class":194},[67,1256,226],{"class":111},[67,1258,1259],{"class":69,"line":218},[67,1260,158],{"emptyLinePlaceholder":157},[67,1262,1263],{"class":69,"line":229},[67,1264,1265],{"class":100},"\u002F\u002F DashboardLayout.jsx\n",[67,1267,1268,1270,1273,1275,1277],{"class":69,"line":362},[67,1269,108],{"class":107},[67,1271,1272],{"class":111}," { Outlet, NavLink } ",[67,1274,115],{"class":107},[67,1276,118],{"class":77},[67,1278,121],{"class":111},[67,1280,1281],{"class":69,"line":383},[67,1282,158],{"emptyLinePlaceholder":157},[67,1284,1285,1287,1290],{"class":69,"line":403},[67,1286,523],{"class":107},[67,1288,1289],{"class":73}," DashboardLayout",[67,1291,529],{"class":111},[67,1293,1294,1296],{"class":69,"line":409},[67,1295,534],{"class":107},[67,1297,537],{"class":111},[67,1299,1300,1302,1305,1308,1310,1313],{"class":69,"line":415},[67,1301,209],{"class":111},[67,1303,1304],{"class":754},"div",[67,1306,1307],{"class":73}," className",[67,1309,454],{"class":107},[67,1311,1312],{"class":77},"\"dashboard\"",[67,1314,226],{"class":111},[67,1316,1317,1319,1322],{"class":69,"line":421},[67,1318,550],{"class":111},[67,1320,1321],{"class":754},"aside",[67,1323,226],{"class":111},[67,1325,1326,1329,1331,1333,1335,1337,1340,1342],{"class":69,"line":426},[67,1327,1328],{"class":111},"        \u003C",[67,1330,789],{"class":194},[67,1332,880],{"class":73},[67,1334,454],{"class":107},[67,1336,1193],{"class":77},[67,1338,1339],{"class":111},">Analytics\u003C\u002F",[67,1341,789],{"class":194},[67,1343,226],{"class":111},[67,1345,1346,1348,1350,1352,1354,1356,1359,1361],{"class":69,"line":445},[67,1347,1328],{"class":111},[67,1349,789],{"class":194},[67,1351,880],{"class":73},[67,1353,454],{"class":107},[67,1355,1223],{"class":77},[67,1357,1358],{"class":111},">Settings\u003C\u002F",[67,1360,789],{"class":194},[67,1362,226],{"class":111},[67,1364,1365,1367,1369],{"class":69,"line":460},[67,1366,973],{"class":111},[67,1368,1321],{"class":754},[67,1370,226],{"class":111},[67,1372,1373,1375,1378],{"class":69,"line":1008},[67,1374,550],{"class":111},[67,1376,1377],{"class":754},"main",[67,1379,226],{"class":111},[67,1381,1382,1384,1386,1389,1392],{"class":69,"line":1040},[67,1383,1328],{"class":111},[67,1385,1108],{"class":194},[67,1387,1388],{"class":111}," \u002F>  {",[67,1390,1391],{"class":100},"\u002F* child route renders here; layout stays mounted *\u002F",[67,1393,203],{"class":111},[67,1395,1396,1398,1400],{"class":69,"line":1045},[67,1397,973],{"class":111},[67,1399,1377],{"class":754},[67,1401,226],{"class":111},[67,1403,1404,1406,1408],{"class":69,"line":1051},[67,1405,664],{"class":111},[67,1407,1304],{"class":754},[67,1409,226],{"class":111},[67,1411,1412],{"class":69,"line":1060},[67,1413,673],{"class":111},[67,1415,1416],{"class":69,"line":1069},[67,1417,203],{"class":111},[10,1419,1420,1421,1424,1425,1428,1429,1432,1433,1435,1436,52],{},"The critical rule: ",[25,1422,1423],{},"never add a leading slash to child route paths",". A leading slash makes the path absolute, so ",[34,1426,1427],{},"\u002Fsettings"," inside a ",[34,1430,1431],{},"\u002Fdashboard"," parent would match the root-level ",[34,1434,1427],{}," instead of ",[34,1437,1438],{},"\u002Fdashboard\u002Fsettings",[14,1440,1442],{"id":1441},"index-routes","Index Routes",[10,1444,1445,1446,1449,1450,1452,1453,1456,1457,1459],{},"An ",[25,1447,1448],{},"index route"," is the default child of a layout route. It renders in the parent's ",[34,1451,1108],{}," when the URL matches the parent path exactly, with nothing following. Declare it with the ",[34,1454,1455],{},"index"," boolean prop instead of a ",[34,1458,487],{},":",[58,1461,1463],{"className":91,"code":1462,"language":93,"meta":63,"style":63},"\u003CRoute path=\"\u002Fprofile\" element={\u003CProfileLayout \u002F>}>\n  \u003CRoute index element={\u003CProfileOverview \u002F>} \u002F>   {\u002F* \u002Fprofile *\u002F}\n  \u003CRoute path=\"posts\"  element={\u003CUserPosts \u002F>} \u002F>  {\u002F* \u002Fprofile\u002Fposts *\u002F}\n  \u003CRoute path=\"likes\"  element={\u003CUserLikes \u002F>} \u002F>  {\u002F* \u002Fprofile\u002Flikes *\u002F}\n\u003C\u002FRoute>\n",[34,1464,1465,1489,1514,1543,1572],{"__ignoreMap":63},[67,1466,1467,1469,1471,1473,1475,1478,1480,1482,1484,1487],{"class":69,"line":70},[67,1468,1124],{"class":111},[67,1470,483],{"class":194},[67,1472,555],{"class":73},[67,1474,454],{"class":107},[67,1476,1477],{"class":77},"\"\u002Fprofile\"",[67,1479,1144],{"class":73},[67,1481,454],{"class":107},[67,1483,568],{"class":111},[67,1485,1486],{"class":194},"ProfileLayout",[67,1488,1154],{"class":111},[67,1490,1491,1493,1495,1497,1499,1501,1503,1506,1509,1512],{"class":69,"line":104},[67,1492,191],{"class":111},[67,1494,483],{"class":194},[67,1496,1163],{"class":73},[67,1498,1144],{"class":73},[67,1500,454],{"class":107},[67,1502,568],{"class":111},[67,1504,1505],{"class":194},"ProfileOverview",[67,1507,1508],{"class":111}," \u002F>} \u002F>   {",[67,1510,1511],{"class":100},"\u002F* \u002Fprofile *\u002F",[67,1513,203],{"class":111},[67,1515,1516,1518,1520,1522,1524,1527,1529,1531,1533,1536,1538,1541],{"class":69,"line":124},[67,1517,191],{"class":111},[67,1519,483],{"class":194},[67,1521,555],{"class":73},[67,1523,454],{"class":107},[67,1525,1526],{"class":77},"\"posts\"",[67,1528,614],{"class":73},[67,1530,454],{"class":107},[67,1532,568],{"class":111},[67,1534,1535],{"class":194},"UserPosts",[67,1537,624],{"class":111},[67,1539,1540],{"class":100},"\u002F* \u002Fprofile\u002Fposts *\u002F",[67,1542,203],{"class":111},[67,1544,1545,1547,1549,1551,1553,1556,1558,1560,1562,1565,1567,1570],{"class":69,"line":139},[67,1546,191],{"class":111},[67,1548,483],{"class":194},[67,1550,555],{"class":73},[67,1552,454],{"class":107},[67,1554,1555],{"class":77},"\"likes\"",[67,1557,614],{"class":73},[67,1559,454],{"class":107},[67,1561,568],{"class":111},[67,1563,1564],{"class":194},"UserLikes",[67,1566,624],{"class":111},[67,1568,1569],{"class":100},"\u002F* \u002Fprofile\u002Flikes *\u002F",[67,1571,203],{"class":111},[67,1573,1574,1576,1578],{"class":69,"line":154},[67,1575,1252],{"class":111},[67,1577,483],{"class":194},[67,1579,226],{"class":111},[10,1581,1582,1583,1586,1587,1589],{},"Without an index route, visiting ",[34,1584,1585],{},"\u002Fprofile"," exactly renders the layout shell with an empty ",[34,1588,1108],{}," — a blank content area with no error message, which is hard to debug.",[14,1591,1593],{"id":1592},"programmatic-navigation-usenavigate","Programmatic Navigation: useNavigate",[10,1595,1596,1597,1600,1601,1604,1605,1608],{},"The ",[25,1598,1599],{},"useNavigate"," hook returns a ",[34,1602,1603],{},"navigate"," function for use in event handlers and effects. Pass a path string to push, or add ",[34,1606,1607],{},"{ replace: true }"," to replace the current history entry:",[58,1610,1612],{"className":91,"code":1611,"language":93,"meta":63,"style":63},"import { useNavigate } from 'react-router-dom';\n\nfunction LoginPage() {\n  const navigate = useNavigate();\n\n  async function handleSubmit(e) {\n    e.preventDefault();\n    await login(credentials);\n    \u002F\u002F replace so pressing Back doesn't return to the login form\n    navigate('\u002Fdashboard', { replace: true });\n  }\n\n  return \u003Cform onSubmit={handleSubmit}>...\u003C\u002Fform>;\n}\n",[34,1613,1614,1627,1631,1640,1655,1659,1678,1688,1699,1704,1722,1727,1731,1752],{"__ignoreMap":63},[67,1615,1616,1618,1621,1623,1625],{"class":69,"line":70},[67,1617,108],{"class":107},[67,1619,1620],{"class":111}," { useNavigate } ",[67,1622,115],{"class":107},[67,1624,118],{"class":77},[67,1626,121],{"class":111},[67,1628,1629],{"class":69,"line":104},[67,1630,158],{"emptyLinePlaceholder":157},[67,1632,1633,1635,1638],{"class":69,"line":124},[67,1634,523],{"class":107},[67,1636,1637],{"class":73}," LoginPage",[67,1639,529],{"class":111},[67,1641,1642,1644,1647,1649,1652],{"class":69,"line":139},[67,1643,724],{"class":107},[67,1645,1646],{"class":194}," navigate",[67,1648,318],{"class":107},[67,1650,1651],{"class":73}," useNavigate",[67,1653,1654],{"class":111},"();\n",[67,1656,1657],{"class":69,"line":154},[67,1658,158],{"emptyLinePlaceholder":157},[67,1660,1661,1664,1667,1670,1672,1675],{"class":69,"line":161},[67,1662,1663],{"class":107},"  async",[67,1665,1666],{"class":107}," function",[67,1668,1669],{"class":73}," handleSubmit",[67,1671,173],{"class":111},[67,1673,1674],{"class":934},"e",[67,1676,1677],{"class":111},") {\n",[67,1679,1680,1683,1686],{"class":69,"line":188},[67,1681,1682],{"class":111},"    e.",[67,1684,1685],{"class":73},"preventDefault",[67,1687,1654],{"class":111},[67,1689,1690,1693,1696],{"class":69,"line":206},[67,1691,1692],{"class":107},"    await",[67,1694,1695],{"class":73}," login",[67,1697,1698],{"class":111},"(credentials);\n",[67,1700,1701],{"class":69,"line":218},[67,1702,1703],{"class":100},"    \u002F\u002F replace so pressing Back doesn't return to the login form\n",[67,1705,1706,1709,1711,1714,1717,1719],{"class":69,"line":229},[67,1707,1708],{"class":73},"    navigate",[67,1710,173],{"class":111},[67,1712,1713],{"class":77},"'\u002Fdashboard'",[67,1715,1716],{"class":111},", { replace: ",[67,1718,368],{"class":194},[67,1720,1721],{"class":111}," });\n",[67,1723,1724],{"class":69,"line":362},[67,1725,1726],{"class":111},"  }\n",[67,1728,1729],{"class":69,"line":383},[67,1730,158],{"emptyLinePlaceholder":157},[67,1732,1733,1735,1737,1740,1743,1745,1748,1750],{"class":69,"line":403},[67,1734,534],{"class":107},[67,1736,751],{"class":111},[67,1738,1739],{"class":754},"form",[67,1741,1742],{"class":73}," onSubmit",[67,1744,454],{"class":107},[67,1746,1747],{"class":111},"{handleSubmit}>...\u003C\u002F",[67,1749,1739],{"class":754},[67,1751,762],{"class":111},[67,1753,1754],{"class":69,"line":409},[67,1755,203],{"class":111},[10,1757,1758,1761,1762,1765],{},[34,1759,1760],{},"navigate(-1)"," goes back one step in history — equivalent to clicking the browser's Back button. Use ",[34,1763,1764],{},"replace: true"," after login, logout, form submissions, and payment confirmations — anywhere the previous step should not appear in the history stack.",[14,1767,1769],{"id":1768},"catch-all-routes-404-pages","Catch-All Routes (404 Pages)",[10,1771,1772,1773,1776,1777,1779],{},"A route with ",[34,1774,1775],{},"path=\"*\""," matches any URL not claimed by earlier routes. Place it last in your ",[34,1778,479],{}," block:",[58,1781,1783],{"className":91,"code":1782,"language":93,"meta":63,"style":63},"\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* always last *\u002F}\n\u003C\u002FRoutes>\n",[34,1784,1785,1793,1815,1838,1865],{"__ignoreMap":63},[67,1786,1787,1789,1791],{"class":69,"line":70},[67,1788,1124],{"class":111},[67,1790,479],{"class":194},[67,1792,226],{"class":111},[67,1794,1795,1797,1799,1801,1803,1805,1807,1809,1811,1813],{"class":69,"line":104},[67,1796,191],{"class":111},[67,1798,483],{"class":194},[67,1800,555],{"class":73},[67,1802,454],{"class":107},[67,1804,560],{"class":77},[67,1806,589],{"class":73},[67,1808,454],{"class":107},[67,1810,568],{"class":111},[67,1812,374],{"class":194},[67,1814,573],{"class":111},[67,1816,1817,1819,1821,1823,1825,1828,1830,1832,1834,1836],{"class":69,"line":124},[67,1818,191],{"class":111},[67,1820,483],{"class":194},[67,1822,555],{"class":73},[67,1824,454],{"class":107},[67,1826,1827],{"class":77},"\"\u002Fabout\"",[67,1829,1144],{"class":73},[67,1831,454],{"class":107},[67,1833,568],{"class":111},[67,1835,394],{"class":194},[67,1837,573],{"class":111},[67,1839,1840,1842,1844,1846,1848,1850,1852,1854,1856,1858,1860,1863],{"class":69,"line":139},[67,1841,191],{"class":111},[67,1843,483],{"class":194},[67,1845,555],{"class":73},[67,1847,454],{"class":107},[67,1849,642],{"class":77},[67,1851,589],{"class":73},[67,1853,454],{"class":107},[67,1855,568],{"class":111},[67,1857,651],{"class":194},[67,1859,624],{"class":111},[67,1861,1862],{"class":100},"\u002F* always last *\u002F",[67,1864,203],{"class":111},[67,1866,1867,1869,1871],{"class":69,"line":154},[67,1868,1252],{"class":111},[67,1870,479],{"class":194},[67,1872,226],{"class":111},[10,1874,1875],{},"Without a catch-all, unmatched URLs render nothing — no error, just an empty page. Always include it.",[14,1877,1879],{"id":1878},"hash-mode-vs-history-mode","Hash Mode vs History Mode",[10,1881,1882,1884,1885,1888,1889,1891,1892,1895,1896,1899],{},[25,1883,87],{}," uses the HTML5 History API, producing clean URLs like ",[34,1886,1887],{},"\u002Fabout",". It requires the web server to redirect all paths to ",[34,1890,47],{}," (Apache: ",[34,1893,1894],{},"FallbackResource \u002Findex.html","; Nginx: ",[34,1897,1898],{},"try_files $uri \u002Findex.html",").",[10,1901,1902,1905,1906,1909],{},[25,1903,1904],{},"HashRouter"," stores the route in the URL hash: ",[34,1907,1908],{},"\u002F#\u002Fabout",". The hash fragment is never sent to the server, so it works on any static file host without configuration — useful for GitHub Pages or environments where you cannot control server routing. The cost is uglier URLs and no server-side rendering support.",[14,1911,1913],{"id":1912},"common-interview-questions-at-a-glance","Common Interview Questions at a Glance",[1915,1916,1917,1927,1940,1957,1963,1974,1991,2004],"ul",{},[1918,1919,1920,1926],"li",{},[25,1921,1922,1923,1925],{},"What replaced the ",[34,1924,495],{}," prop in v6?"," It was removed — all routes match exactly by default; no prop needed.",[1918,1928,1929,1936,1937,1939],{},[25,1930,1931,1932,1935],{},"What replaced ",[34,1933,1934],{},"Switch"," in v6?"," The ",[34,1938,479],{}," component, which also does automatic route ranking by specificity.",[1918,1941,1942,1945,1946,37,1948,1950,1951,1953,1954,1956],{},[25,1943,1944],{},"How do you style the active NavLink in v6?"," Pass a callback to ",[34,1947,807],{},[34,1949,810],{}," that receives ",[34,1952,814],{}," — ",[34,1955,796],{}," was removed.",[1918,1958,1959,1962],{},[25,1960,1961],{},"What does Outlet do?"," It renders the matched child route's element inside a parent layout component.",[1918,1964,1965,1968,1969,1435,1971,1973],{},[25,1966,1967],{},"What is an index route?"," A child route with ",[34,1970,1455],{},[34,1972,487],{}," that renders when the parent URL matches exactly.",[1918,1975,1976,1979,1980,1982,1983,1986,1987,1990],{},[25,1977,1978],{},"How do you navigate programmatically?"," Use the ",[34,1981,1599],{}," hook; call ",[34,1984,1985],{},"navigate(path)"," to push or ",[34,1988,1989],{},"navigate(path, { replace: true })"," to replace.",[1918,1992,1993,1996,1997,2000,2001,2003],{},[25,1994,1995],{},"How do you create a 404 page?"," Add ",[34,1998,1999],{},"\u003CRoute path=\"*\" element={\u003CNotFound \u002F>} \u002F>"," as the last route in a ",[34,2002,479],{}," block.",[1918,2005,2006,2009],{},[25,2007,2008],{},"What is the difference between BrowserRouter and HashRouter?"," BrowserRouter uses History API with clean URLs but requires server config; HashRouter encodes routes in the hash and needs no server config.",[810,2011,2012],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":63,"searchDepth":104,"depth":104,"links":2014},[2015,2016,2017,2018,2019,2020,2021,2022,2023,2024],{"id":16,"depth":104,"text":17},{"id":55,"depth":104,"text":56},{"id":473,"depth":104,"text":474},{"id":769,"depth":104,"text":770},{"id":1088,"depth":104,"text":1089},{"id":1441,"depth":104,"text":1442},{"id":1592,"depth":104,"text":1593},{"id":1768,"depth":104,"text":1769},{"id":1878,"depth":104,"text":1879},{"id":1912,"depth":104,"text":1913},"Master React Router v6 routing basics for interviews — BrowserRouter, Route, Link, NavLink, Outlet, nested routes, index routes, useNavigate, and 404 catch-all routes.","easy","md","React","react",{},"\u002Fblog\u002Freact-routing-basics-guide","\u002Freact\u002Frouting\u002Frouting-basics",{"title":5,"description":2025},"blog\u002Freact-routing-basics-guide","Routing Basics","Routing","routing","2026-06-24","cLkHGd11ZZcbIC4o5MKIht43bIjaOx4-dLLBnDN0fVI",1782244083220]