[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Freact-router-v6-a-comprehensive-guide-to-page-routing-in-react":663,"blog-author-\u002Fblog\u002Freact-router-v6-a-comprehensive-guide-to-page-routing-in-react":1093,"i-material-symbols:arrow-back-rounded":1108},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Sign in","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","VdirGIa8cUm6xLprbBeTKcw914JfyJjWfF-9hSVOX5Y",{"id":87,"extension":5,"links":88,"meta":660,"stem":661,"__hash__":662},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,295,299,303,306,310,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,453,457,461,465,469,473,477,480,483,486,489,493,497,500,504,508,512,516,520,524,528,532,536,540,544,548,551,555,559,563,567,571,574,577,580,584,587,591,595,599,603,606,610,614,617,620,623,627,631,635,638,641,644,648,652,656],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":209,"label":210,"href":211},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":213,"label":214,"href":215},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":217,"label":218,"href":219},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":221,"label":222,"href":223},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":225,"label":226,"href":227},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":229,"label":230,"href":231},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":233,"label":234,"href":235},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":237,"label":238,"href":239},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":241,"label":242,"href":243},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":245,"label":246,"href":247},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":249,"label":250,"href":251},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":253,"label":254,"href":255},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":257,"label":258,"href":259},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":261,"label":262,"href":263},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":265,"label":266,"href":267},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":269,"label":270,"href":271},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":273,"label":274,"href":275},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":277,"label":278,"href":279},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":281,"label":282,"href":283},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":285,"label":286,"href":287},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":289,"label":290,"href":291},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":293,"label":294,"href":92},"docs.desktop.download","Desktop download docs",{"key":296,"label":297,"href":298},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":300,"label":301,"href":302},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":304,"label":305,"href":207},"docs.piecesOS.install","PiecesOS install docs",{"key":307,"label":308,"href":309},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":311,"label":312,"href":313},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":315,"label":316,"href":317},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":319,"label":320,"href":321},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":323,"label":324,"href":325},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":327,"label":328,"href":329},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":331,"label":332,"href":333},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":335,"label":336,"href":337},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":343,"label":344,"href":345},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":347,"label":348,"href":349},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":351,"label":352,"href":353},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":355,"label":356,"href":357},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":359,"label":360,"href":361},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":363,"label":364,"href":365},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":367,"label":368,"href":369},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":371,"label":372,"href":373},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":375,"label":376,"href":377},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":379,"label":380,"href":381},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":383,"label":384,"href":385},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":387,"label":388,"href":389},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":391,"label":392,"href":393},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":395,"label":396,"href":397},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":399,"label":400,"href":401},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":403,"label":404,"href":405},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":407,"label":408,"href":409},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":411,"label":412,"href":413},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":415,"label":416,"href":417},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":419,"label":420,"href":421},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":423,"label":424,"href":425},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":427,"label":428,"href":429},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":431,"label":432,"href":433},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":435,"label":436,"href":437},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":439,"label":440,"href":441},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":443,"label":444,"href":445},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":447,"label":448,"href":449},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":451,"label":58,"href":452},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":454,"label":455,"href":456},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":458,"label":459,"href":460},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":462,"label":463,"href":464},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":466,"label":467,"href":468},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":470,"label":471,"href":472},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":474,"label":475,"href":476},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":478,"label":34,"href":479},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":481,"label":43,"href":482},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":484,"label":46,"href":485},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":487,"label":488,"href":485},"social.twitter","Twitter",{"key":490,"label":491,"href":492},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":494,"label":495,"href":496},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":498,"label":49,"href":499},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":501,"label":502,"href":503},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":505,"label":506,"href":507},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":509,"label":510,"href":511},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":513,"label":514,"href":515},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":517,"label":518,"href":519},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":521,"label":522,"href":523},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":525,"label":526,"href":527},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":529,"label":530,"href":531},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":533,"label":534,"href":535},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":537,"label":538,"href":539},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":541,"label":542,"href":543},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":545,"label":546,"href":547},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":549,"label":550,"href":247},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":552,"label":553,"href":554},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":556,"label":557,"href":558},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":560,"label":561,"href":562},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":564,"label":565,"href":566},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":568,"label":569,"href":570},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":572,"label":573,"href":66},"legal.privacyPolicy","Privacy policy",{"key":575,"label":576,"href":69},"legal.refundPolicy","Refund policy",{"key":578,"label":579,"href":72},"legal.terms","Terms",{"key":581,"label":582,"href":583},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":585,"label":586,"href":503},"videos.youtubeChannel","YouTube channel",{"key":588,"label":589,"href":590},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":592,"label":593,"href":594},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":596,"label":597,"href":598},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":600,"label":601,"href":602},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":604,"label":605,"href":519},"sales.feedback","Feedback discussions",{"key":607,"label":608,"href":609},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":611,"label":612,"href":613},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":615,"label":616,"href":19},"routes.home","Home route",{"key":618,"label":619,"href":56},"routes.about","About route",{"key":621,"label":622,"href":12},"routes.downloads","Downloads route",{"key":624,"label":625,"href":626},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":628,"label":629,"href":630},"routes.pricing","Pricing route","\u002Fpricing",{"key":632,"label":633,"href":634},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":636,"label":637,"href":22},"routes.enterprise","Enterprise route",{"key":639,"label":640,"href":62},"routes.contact","Contact route",{"key":642,"label":643,"href":59},"routes.updates","Updates route",{"key":645,"label":646,"href":647},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":649,"label":650,"href":651},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":653,"label":654,"href":655},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":657,"label":658,"href":659},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","NLkVE1lIUws518K-1QsSB6T-GvlXYIzcRL1HDhqarGQ",{"id":664,"title":665,"author":666,"authorPhoto":667,"authorPhotoAlt":668,"authorSlug":669,"body":670,"buttonText":1080,"buttonUrl":1080,"category":1081,"date":1082,"description":1083,"draft":1084,"editorsPick":1084,"extension":1085,"featured":1084,"image":1086,"imageAlt":1087,"meta":1088,"navigation":32,"ogImage":1080,"ogImageAlt":1080,"path":1089,"seo":1090,"stem":1091,"tags":1080,"__hash__":1092},"blog\u002Fblog\u002Freact-router-v6-a-comprehensive-guide-to-page-routing-in-react.md","React Router v6: A Comprehensive Guide to Page Routing in React","James Amoo","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Ftailwind-theming-create-light-and-dark-modes\u002Fauthor.jpeg","James Amoo headshot.","james-amoo",{"type":671,"value":672,"toc":1070},"minimark",[673,677,680,683,710,715,730,734,737,767,771,774,824,828,831,839,849,857,863,871,877,885,891,895,898,904,910,916,922,931,937,940,944,947,953,963,969,972,978,990,996,1005,1012,1015,1019,1022,1063,1067],[674,675,676],"p",{},"Users can navigate through web pages thanks to a process called routing. Routing in web applications is crucial, as it enables users to access different pages in an application upon request. Because it does not provide its own router, React must be paired with an external library called React Router.",[674,678,679],{},"This article will explore React Router v6, its core features, and how to implement it in your projects.",[674,681,682],{},"To properly understand how page routing works using React Router, you must be familiar with the following:",[684,685,686,696,703],"ul",{},[687,688,689],"li",{},[690,691,695],"a",{"href":692,"rel":693},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript",[694],"nofollow","JavaScript",[687,697,698],{},[690,699,702],{"href":700,"rel":701},"https:\u002F\u002Fpieces.app\u002Fblog\u002Freact-19-comprehensive-guide",[694],"React",[687,704,705],{},[690,706,709],{"href":707,"rel":708},"https:\u002F\u002Fnodejs.org\u002Fen",[694],"Node JS",[711,712,714],"h2",{"id":713},"what-is-react-router","What is React Router?",[674,716,717,718,723,724,729],{},"React Router is ",[690,719,722],{"href":720,"rel":721},"https:\u002F\u002Freactrouter.com\u002Fen\u002Fmain",[694],"a library that provides the functionality"," for client-side routing in React. It’s widely used in building ",[690,725,728],{"href":726,"rel":727},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FSPA",[694],"single-page applications (SPAs)",". React Router's major importance lies in its ability to navigate from one page to another in an application while providing a seamless user experience. With this library, users can navigate to pages on a website without triggering a page reload every time a new page is clicked. This also improves the speed and performance of an application.",[711,731,733],{"id":732},"features-of-react-router","Features of React Router",[674,735,736],{},"The need for React Router and its importance expands beyond the navigation of web pages. It provides additional helpful features, some of which we will discuss in this section.",[684,738,739,746,752,758,761],{},[687,740,741,745],{},[742,743,744],"strong",{},"Client-side Routing",": Client-side routing allows users to access content from a web page without an additional server request. This removes the need for a page to reload as its content becomes available immediately after its link is clicked. This is a major upgrade to traditional websites where a page reload is initiated every time a user clicks a link.",[687,747,748,751],{},[742,749,750],{},"Dynamic Routing",": React React Router adopts the dynamic approach of routing which allows routes to be defined during an application’s rendering state. This leads to faster load times and the development of more complex applications.",[687,753,754,757],{},[742,755,756],{},"Redirects",": With React Router, you can conditionally navigate to a new route. Redirects allow users to navigate to a new location that overrides the history stack's current location. For example, a login page should redirect to a dashboard page after successful user authentication.",[687,759,760],{},": With React suspense in React-Router, you can include a skeleton UI that serves as a placeholder when a new page is loaded or a data fetch process is completed.",[687,762,763,766],{},[742,764,765],{},"Error Handling",": React Router 6 handles most of the errors in your application, catching errors that are thrown while rendering, loading, or updating data.",[711,768,770],{"id":769},"whats-new-in-react-router-v6","What’s New in React Router v6?",[674,772,773],{},"In addition to the features discussed above, React Router v6 introduces significant improvements and major breaking changes from the previous versions.",[684,775,776,782,788,794,800,815,818],{},[687,777,778,781],{},[742,779,780],{},"Nested Routes",": The new version of React Router allows the use of nested routes, a powerful feature used to define a particular route inside another route. This is especially useful in blogs where you need to render multiple components on the same page following a particular sequence. For example, a blog comment component should only be accessed after a particular blog post component has been rendered.",[687,783,784,787],{},[742,785,786],{},"Routes Component",": The component replaces the component in v6, further simplifying React routing and improving user experience.",[687,789,790,793],{},[742,791,792],{},"Smaller Bundle Size:"," Compared to v5, React Router v6 has a significantly smaller bundle size, which allows developers to build more performant applications.",[687,795,796,799],{},[742,797,798],{},"Relative Links",": Unlike previous versions of React Router, v6 comes with relative links. This defeats the need for explicitly defining a React Router or for a child route as it automatically takes the URL of the parent route.",[687,801,802,805,806,810,811,814],{},[742,803,804],{},"Improved Redirect Functionality",": Redirects are implemented using the component, replacing ",[807,808,809],"code",{},"history.push"," and ",[807,812,813],{},"history.replace"," as used in v5.",[687,816,817],{},": The component simplifies the logic of implementing nested routes in React Router v6.",[687,819,820,823],{},[742,821,822],{},"useParams Hook",": This version provides a way to access the dynamic parts of a URL. This is very helpful when working with dynamic URL paths such as fetching data using a user ID or blog posts using a slug.",[711,825,827],{"id":826},"react-router-components","React Router Components",[674,829,830],{},"React Router provides built-in components that allow us to implement page routing. The major components include:",[684,832,833],{},[687,834,835,838],{},[742,836,837],{},"BrowserRouter",": The BrowserRouter is the parent component that stores other components. It keeps the application’s UI in sync with the URL by storing the current location in the browser’s address bar. Here’s an example:",[840,841,846],"pre",{"className":842,"code":844,"language":845},[843],"language-text","import * as React from \"react\";\nimport { createRoot } from \"react-dom\u002Fclient\";\nimport { BrowserRouter } from \"react-router-dom\";\nconst root = createRoot(document.getElementById(\"root\"));\nroot.render(\n    {\u002F* App routes *\u002F}\n);\n","text",[807,847,844],{"__ignoreMap":848},"",[684,850,851],{},[687,852,853,856],{},[742,854,855],{},"Link",": The Link component is used to create links in your application. It is similar to the tag in HTML but does not trigger a page reload when clicked, making it suitable for single-page applications (SPA). Here’s an example:",[840,858,861],{"className":859,"code":860,"language":845},[843],"import { Link } from 'react-router-dom';\nfunction Navigation() {\n  return (\nHome        \nAbout        \n  );\n}\nexport default Navigation;\n",[807,862,860],{"__ignoreMap":848},[684,864,865],{},[687,866,867,870],{},[742,868,869],{},"Route",": The React route component controls the rendering of web pages by rendering page content if the current URL matches the path specified in the Route component. Here’s how it is used:",[840,872,875],{"className":873,"code":874,"language":845},[843],"\u003CRoute path=\"\u002F\" element={\u003CHomePage \u002F>} \u002F>\u003CRoute path=\"\u002Fabout\" element={\u003CAboutPage \u002F>} \u002F>\n",[807,876,874],{"__ignoreMap":848},[684,878,879],{},[687,880,881,884],{},[742,882,883],{},"Routes",": Introduced in v6, the React Routes component contains multiple routes in your application. The component replaced the component used in React Router v5 and older versions.",[840,886,889],{"className":887,"code":888,"language":845},[843],"import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';\nimport HomePage from '.\u002FHomePage';\nimport AboutPage from '.\u002FAboutPage';\nfunction App() {\n return (\n} \u002F>        } \u002F>          \n  );\n}\nexport default App;\n",[807,890,888],{"__ignoreMap":848},[711,892,894],{"id":893},"installation","Installation",[674,896,897],{},"To use the library and improve your routing with Reactjs, you must have React installed and set up on your machine. Follow these steps to get started:",[899,900,901],"ol",{},[687,902,903],{},"Open your terminal and run this command to create a new React project (using Vite):",[840,905,908],{"className":906,"code":907,"language":845},[843],"npm create vite react-router-project react\n",[807,909,907],{"__ignoreMap":848},[899,911,913],{"start":912},2,[687,914,915],{},"Install the React Router library:",[840,917,920],{"className":918,"code":919,"language":845},[843],"npm install react-router-dom@latest\n",[807,921,919],{"__ignoreMap":848},[899,923,925],{"start":924},3,[687,926,927,928,930],{},"Open your main.js (or index.js) file and wrap your App component in the ",[807,929,837],{}," component:",[840,932,935],{"className":933,"code":934,"language":845},[843],"import React from 'react';\n import ReactDOM from 'react-dom\u002Fclient';\n import '.\u002Findex.css';\n import App from '.\u002FApp';\n import reportWebVitals from '.\u002FreportWebVitals';\n import { BrowserRouter } from 'react-router-dom';\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(\n );\n",[807,936,934],{"__ignoreMap":848},[674,938,939],{},"Now we’re all set! We can now see how we’ll navigate web pages with the help of the React Router.",[711,941,943],{"id":942},"implementing-page-routing-with-react-router-v6","Implementing Page Routing with React Router v6",[674,945,946],{},"In this section, we’ll look at a practical example of implementing page routing using React Router. Our goal is to navigate between different pages of a web application without triggering a reload. First, we start by creating our Navbar, which will contain our links:",[840,948,951],{"className":949,"code":950,"language":845},[843],"import { Link } from \"react-router-dom\"; const Navbar = () => {   return (\u003Cnav>\u003Cul>\u003Cli>\u003CLink to=\"\u002F\">Home\u003C\u002FLink>\u003C\u002Fli>\u003Cli>\u003CLink to=\"\u002Fabout\">About Pieces\u003C\u002FLink>\u003C\u002Fli>\u003Cli>\u003CLink to=\"\u002Fsnippet\">Code Snippet\u003C\u002FLink>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fnav>   ); }\n",[807,952,950],{"__ignoreMap":848},[674,954,955,956,958,959,962],{},"Here, we have created three links using the ",[807,957,855],{}," component from ",[807,960,961],{},"react-router-dom",". We can then create the files that contain the pages’ content when the links are clicked. Let’s start by creating a simple component for our Home page:",[840,964,967],{"className":965,"code":966,"language":845},[843],"\u002F\u002FHome.js\n import React from 'react'\n import Navbar from '.\u002FNavbar'\n const Home = () => {\n   return (\n                  Welcome to the Pieces Tutorial     \n   )\n }\n export default Home\n",[807,968,966],{"__ignoreMap":848},[674,970,971],{},"After creating the home page, we’re left with two pages. Let’s create the “About Pieces” page neFinally, let’s create our ‘Code Snippet” page:",[840,973,976],{"className":974,"code":975,"language":845},[843],"\u002F\u002FSnippet.js\nimport React from \"react\";\nimport Navbar from \".\u002FNavbar\";\nconst Snippet = () => {\n  return (\n            Code Snippet      Have a full explanation and use case of the code provided      Determine possibilities and limitations of code      Ask specific questions based on the code provided.    \n  );\n};\nexport default Snippet;\n",[807,977,975],{"__ignoreMap":848},[674,979,980,981,984,985,810,987,989],{},"After creating the content for these web pages, we can use the routing functionality offered by the React Router. In your ",[807,982,983],{},"App.js"," file, import the ",[807,986,883],{},[807,988,869],{}," component from the library:",[840,991,994],{"className":992,"code":993,"language":845},[843],"import { Route, Routes } from 'react-router-dom';\n import '.\u002FApp.css';\n import Home from '.\u002FHome';\n import About from '.\u002FAbout';\n import Snippet from '.\u002FSnippet';\n function App() {\n return (\n                } \u002F>         } \u002F>         } \u002F>            \n   );\n }\n",[807,995,993],{"__ignoreMap":848},[674,997,998,999,1001,1002,1004],{},"As we explained earlier, the ",[807,1000,869],{}," components are wrapped in ",[807,1003,883],{},". The element contains the component to be rendered when a path matches a URL. Here’s how the code snippet behaves in our browser:",[674,1006,1007],{},[1008,1009],"img",{"alt":1010,"src":1011},"Interacting with hyperlinks using React Router and Pieces.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-router-v6-a-comprehensive-guide-to-page-routing-in-react\u002Fimg-001.gif",[674,1013,1014],{},"We’ve successfully implemented page routing using React js Router! We see that other pages are loaded without triggering a full page reload.",[711,1016,1018],{"id":1017},"react-router-x-pieces-staying-ahead-of-the-curve","React Router x Pieces: Staying Ahead of the Curve",[674,1020,1021],{},"Are you excited about the React Router update and eager to use it in development? You don’t have to do it alone; Pieces is here to help! Here are three ways Pieces can help you in your journey:",[899,1023,1024,1036,1047],{},[687,1025,1026,1029,1030,1035],{},[742,1027,1028],{},"Collections",": Stay ahead of coding with the Pieces-curated ",[690,1031,1034],{"href":1032,"rel":1033},"https:\u002F\u002Fcode.pieces.app\u002Fcollections\u002Fjavascript",[694],"JavaScript Snippet Collection",", which contains common and helpful snippets in development. This snippet collection removes the need to write code from scratch, saving you time.",[687,1037,1038,1041,1042,1046],{},[742,1039,1040],{},"Pieces Copilot",": Can’t find your specific use case in the snippets collection? ",[690,1043,1040],{"href":1044,"rel":1045},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fmaximizing-development-efficiency-with-pieces-copilot",[694]," provides contextualized code generation specifically tailored to your codebase. Explore the exciting possibilities of React Router with the help of the Pieces Copilot.",[687,1048,1049,1051,1052,1057,1058,1062],{},[742,1050,40],{},": Do you have any questions or are you curious to know more about React’s features? The ",[690,1053,1056],{"href":1054,"rel":1055},"https:\u002F\u002Fdiscord.com\u002Finvite\u002Fgetpieces",[694],"Pieces Discord community"," would love to chat! This fast-growing community of friendly developers is eager to learn, help with debugging, and build using exciting languages and the ",[690,1059,1061],{"href":507,"rel":1060},[694],"Pieces API",".",[711,1064,1066],{"id":1065},"conclusion","Conclusion",[674,1068,1069],{},"React Router provides a smooth experience when navigating between web pages, leading to an overall improved user experience. In this blog post, you have learned about React Router and its features, components, and implementation of page routing using it. Further, you learned three key aspects that Pieces can help you with when implementing page routing or throughout your entire development process. Happy coding!",{"title":848,"searchDepth":912,"depth":912,"links":1071},[1072,1073,1074,1075,1076,1077,1078,1079],{"id":713,"depth":912,"text":714},{"id":732,"depth":912,"text":733},{"id":769,"depth":912,"text":770},{"id":826,"depth":912,"text":827},{"id":893,"depth":912,"text":894},{"id":942,"depth":912,"text":943},{"id":1017,"depth":912,"text":1018},{"id":1065,"depth":912,"text":1066},null,"Software Development","2024-07-09T00:00:00.000Z","Dive into a comprehensive guide on React Router and how to implement Page Routing inside a React project.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-router-v6-a-comprehensive-guide-to-page-routing-in-react\u002Fhero.jpeg","Code in an IDE.",{},"\u002Fblog\u002Freact-router-v6-a-comprehensive-guide-to-page-routing-in-react",{"title":665,"description":1083},"blog\u002Freact-router-v6-a-comprehensive-guide-to-page-routing-in-react","0F0kJxkouLErkeSWcJlPb2egV6XUqnAzTGWM1II_G-U",{"id":1094,"title":666,"body":1095,"description":1099,"draft":1084,"extension":1085,"meta":1102,"navigation":32,"path":1103,"photo":1104,"photoAlt":1080,"seo":1105,"stem":1106,"__hash__":1107},"authors\u002Fauthors\u002Fjames-amoo.md",{"type":671,"value":1096,"toc":1100},[1097],[674,1098,1099],{},"James Amoo is a Software Engineer and a Technical Writer. He excels in creating scalable software solutions and crafting clear and concise documentation. Having graduated with a First Class Honours degree in Computer Science, he is fundamentally well-versed in the in-depth concepts of programming.",{"title":848,"searchDepth":912,"depth":912,"links":1101},[],{},"\u002Fauthors\u002Fjames-amoo","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fjames-amoo.jpeg",{"title":666,"description":1099},"authors\u002Fjames-amoo","cHsg7jg2RaRueV_cvOOD8JHsrLPQxt-lYAgFPEDW_A8",{"left":1109,"top":1109,"width":1110,"height":1110,"rotate":1109,"vFlip":1084,"hFlip":1084,"body":1111},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]