mirror of
https://github.com/facebook/docusaurus.git
synced 2025-08-06 10:20:09 +02:00
151 lines
No EOL
72 KiB
HTML
151 lines
No EOL
72 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-advanced/routing" data-has-hydrated="false">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v3.2.1">
|
||
<title data-rh="true">Routing | Docusaurus</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://docusaurus.io/img/docusaurus-social-card.jpg"><meta data-rh="true" name="twitter:image" content="https://docusaurus.io/img/docusaurus-social-card.jpg"><meta data-rh="true" property="og:url" content="https://docusaurus.io/docs/advanced/routing"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" property="og:locale:alternate" content="fr"><meta data-rh="true" property="og:locale:alternate" content="pt_BR"><meta data-rh="true" property="og:locale:alternate" content="ko"><meta data-rh="true" property="og:locale:alternate" content="zh_CN"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Routing | Docusaurus"><meta data-rh="true" name="description" content="Docusaurus' routing system follows single-page application conventions: one route, one component."><meta data-rh="true" property="og:description" content="Docusaurus' routing system follows single-page application conventions: one route, one component."><link data-rh="true" rel="icon" href="/img/docusaurus.ico"><link data-rh="true" rel="canonical" href="https://docusaurus.io/docs/advanced/routing"><link data-rh="true" rel="alternate" href="https://docusaurus.io/docs/advanced/routing" hreflang="en"><link data-rh="true" rel="alternate" href="https://docusaurus.io/fr/docs/advanced/routing" hreflang="fr"><link data-rh="true" rel="alternate" href="https://docusaurus.io/pt-BR/docs/advanced/routing" hreflang="pt-BR"><link data-rh="true" rel="alternate" href="https://docusaurus.io/ko/docs/advanced/routing" hreflang="ko"><link data-rh="true" rel="alternate" href="https://docusaurus.io/zh-CN/docs/advanced/routing" hreflang="zh-CN"><link data-rh="true" rel="alternate" href="https://docusaurus.io/docs/advanced/routing" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://X1Z85QJPUV-dsn.algolia.net" crossorigin="anonymous"><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Docusaurus RSS Feed">
|
||
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Docusaurus Atom Feed">
|
||
<link rel="alternate" type="application/json" href="/blog/feed.json" title="Docusaurus JSON Feed">
|
||
|
||
|
||
<link rel="preconnect" href="https://www.google-analytics.com">
|
||
<link rel="preconnect" href="https://www.googletagmanager.com">
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-E5CR2Q1NRE"></script>
|
||
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-E5CR2Q1NRE",{})</script>
|
||
|
||
|
||
<link rel="search" type="application/opensearchdescription+xml" title="Docusaurus" href="/opensearch.xml">
|
||
<link rel="alternate" type="application/rss+xml" href="/changelog/rss.xml" title="Docusaurus changelog RSS Feed">
|
||
<link rel="alternate" type="application/atom+xml" href="/changelog/atom.xml" title="Docusaurus changelog Atom Feed">
|
||
<link rel="alternate" type="application/json" href="/changelog/feed.json" title="Docusaurus changelog JSON Feed">
|
||
|
||
|
||
|
||
<link rel="icon" href="/img/docusaurus.png">
|
||
<link rel="manifest" href="/manifest.json">
|
||
<meta name="theme-color" content="rgb(37, 194, 160)">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="#000">
|
||
<link rel="apple-touch-icon" href="/img/docusaurus.png">
|
||
<link rel="mask-icon" href="/img/docusaurus.png" color="rgb(62, 204, 94)">
|
||
<meta name="msapplication-TileImage" content="/img/docusaurus.png">
|
||
<meta name="msapplication-TileColor" content="#000">
|
||
|
||
|
||
|
||
<link rel="alternate" type="application/rss+xml" href="/tests/blog/rss.xml" title="Docusaurus Tests Blog RSS Feed">
|
||
<link rel="alternate" type="application/atom+xml" href="/tests/blog/atom.xml" title="Docusaurus Tests Blog Atom Feed">
|
||
<link rel="alternate" type="application/json" href="/tests/blog/feed.json" title="Docusaurus Tests Blog JSON Feed">
|
||
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="/katex/katex.min.css"><link rel="stylesheet" href="/assets/css/styles.76313542.css">
|
||
<script src="/assets/js/runtime~main.e1b4125a.js" defer="defer"></script>
|
||
<script src="/assets/js/main.5c3bbcf1.js" defer="defer"></script>
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return localStorage.getItem("theme")}catch(t){}}();null!==e?t(e):window.matchMedia("(prefers-color-scheme: dark)").matches?t("dark"):(window.matchMedia("(prefers-color-scheme: light)").matches,t("light"))}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_UHvc" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="announcementBar_cTOO" role="banner"><div class="announcementBarPlaceholder_Lqfg"></div><div class="content_ttnW announcementBarContent_PjqA">🎉️ <b><a target="_blank" href="https://docusaurus.io/blog/releases/3.2">Docusaurus v3.2</a> is out!</b> 🥳️</div><button type="button" aria-label="Close" class="clean-btn close closeButton_nmpN announcementBarClose_UFLi"><svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg></button></div><nav aria-label="Main" class="navbar navbar--fixed-top navbarHideable_uAgx"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/docusaurus.svg" alt="" class="themedComponent_bJGS themedComponent--light_LEkC" height="32" width="32"><img src="/img/docusaurus_keytar.svg" alt="" class="themedComponent_bJGS themedComponent--dark_jnGk" height="32" width="32"></div><b class="navbar__title text--truncate">Docusaurus</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs">Docs</a><a class="navbar__item navbar__link" href="/docs/cli">API</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a class="navbar__item navbar__link" href="/showcase">Showcase</a><a class="navbar__item navbar__link" href="/community/support">Community</a></div><div class="navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a class="navbar__link" aria-haspopup="true" aria-expanded="false" role="button" href="/docs">Canary 🚧</a><ul class="dropdown__menu"><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/advanced/routing">Canary 🚧</a></li><li><hr class="dropdown-separator"></li><li class="dropdown-archived-versions"><b>Archived versions</b></li><li><a href="https://docusaurus-archive-october-2023.netlify.app/docs/2.3.1" target="_blank" rel="noopener noreferrer" class="dropdown__link">2.3.1<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><a href="https://docusaurus-archive-october-2023.netlify.app/docs/2.2.0" target="_blank" rel="noopener noreferrer" class="dropdown__link">2.2.0<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><a href="https://docusaurus-archive-october-2023.netlify.app/docs/2.1.0" target="_blank" rel="noopener noreferrer" class="dropdown__link">2.1.0<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><a href="https://docusaurus-archive-october-2023.netlify.app/docs/2.0.1" target="_blank" rel="noopener noreferrer" class="dropdown__link">2.0.1<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><a href="https://v1.docusaurus.io" target="_blank" rel="noopener noreferrer" class="dropdown__link">1.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><hr class="dropdown-separator"></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" class="iconLanguage_tqOs"><path fill="currentColor" d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"></path></svg>English</a><ul class="dropdown__menu"><li><a href="/docs/advanced/routing" target="_self" rel="noopener noreferrer" class="dropdown__link dropdown__link--active" lang="en">English</a></li><li><a href="/fr/docs/advanced/routing" target="_self" rel="noopener noreferrer" class="dropdown__link" lang="fr">Français</a></li><li><a href="/pt-BR/docs/advanced/routing" target="_self" rel="noopener noreferrer" class="dropdown__link" lang="pt-BR">Português (Brasil)</a></li><li><a href="/ko/docs/advanced/routing" target="_self" rel="noopener noreferrer" class="dropdown__link" lang="ko">한국어</a></li><li><a href="/zh-CN/docs/advanced/routing" target="_self" rel="noopener noreferrer" class="dropdown__link" lang="zh-CN">中文（中国）</a></li><li><hr style="margin: 0.3rem 0;"></li><li><a href="https://github.com/facebook/docusaurus/issues/3526" target="_blank" rel="noopener noreferrer" class="dropdown__link">Help Us Translate<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><a href="https://github.com/facebook/docusaurus" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link header-github-link" aria-label="GitHub repository"></a><div class="toggle_bT41 colorModeToggle_UolE"><button class="clean-btn toggleButton_x9TT toggleButtonDisabled_Dj8q" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_dnYY"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_OBbf"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_dDCC"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_PEsc"><div class="docsWrapper_lLmf"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_PuQw" type="button"></button><div class="docRoot_kBZ6"><aside class="theme-doc-sidebar-container docSidebarContainer_S51O"><div class="sidebarViewport_K3q9"><div class="sidebar_vtcw sidebarWithHideableNavbar_tZ9s"><a tabindex="-1" class="sidebarLogo_UK0N" href="/"><img src="/img/docusaurus.svg" alt="" class="themedComponent_bJGS themedComponent--light_LEkC" height="32" width="32"><img src="/img/docusaurus_keytar.svg" alt="" class="themedComponent_bJGS themedComponent--dark_jnGk" height="32" width="32"><b>Docusaurus</b></a><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_rWGR menuWithAnnouncementBar_Pf08"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs">Introduction</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/docs/category/getting-started">Getting Started</a><button aria-label="Collapse sidebar category 'Getting Started'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/configuration">Configuration</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/playground">Playground</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/typescript-support">TypeScript Support</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/docs/category/guides">Guides</a><button aria-label="Expand sidebar category 'Guides'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/docs/advanced">Advanced Guides</a><button aria-label="Collapse sidebar category 'Advanced Guides'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/advanced/architecture">Architecture</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/advanced/plugins">Plugins</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/docs/advanced/routing">Routing</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/advanced/ssg">Static site generation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/advanced/client">Client architecture</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/docs/migration">Upgrading</a><button aria-label="Expand sidebar category 'Upgrading'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></nav><button type="button" title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_PUyN"><svg width="20" height="20" aria-hidden="true" class="collapseSidebarButtonIcon_DI0B"><g fill="#7a7a7a"><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"></path><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"></path></g></svg></button></div></div></aside><main class="docMainContainer_EfwR"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_n6xZ"><div class="docItemContainer_RhpI"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Wvrh" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_uaSn"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/docs/advanced"><span itemprop="name">Advanced Guides</span></a><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Routing</span><meta itemprop="position" content="2"></li></ul></nav><div class="tocCollapsible_BEWm theme-doc-toc-mobile tocMobile_NSfz"><button type="button" class="clean-btn tocCollapsibleButton_IbtT">On this page</button></div><div class="theme-doc-markdown markdown"><h1>Routing</h1>
|
||
<!-- -->
|
||
<p>Docusaurus' routing system follows single-page application conventions: one route, one component. In this section, we will begin by talking about routing within the three content plugins (docs, blog, and pages), and then go beyond to talk about the underlying routing system.</p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="routing-in-content-plugins">Routing in content plugins<a href="#routing-in-content-plugins" class="hash-link" aria-label="Direct link to Routing in content plugins" title="Direct link to Routing in content plugins"></a></h2>
|
||
<p>Every content plugin provides a <code>routeBasePath</code> option. It defines where the plugins append their routes to. By default, the docs plugin puts its routes under <code>/docs</code>; the blog plugin, <code>/blog</code>; and the pages plugin, <code>/</code>. You can think about the route structure like this:</p>
|
||
<!-- -->
|
||
<p>Any route will be matched against this nested route config until a good match is found. For example, when given a route <code>/docs/configuration</code>, Docusaurus first enters the <code>/docs</code> branch, and then searches among the subroutes created by the docs plugin.</p>
|
||
<p>Changing <code>routeBasePath</code> can effectively alter your site's route structure. For example, in <a href="/docs/docs-introduction#docs-only-mode">Docs-only mode</a>, we mentioned that configuring <code>routeBasePath: '/'</code> for docs means that all routes that the docs plugin create would not have the <code>/docs</code> prefix, yet it doesn't prevent you from having more subroutes like <code>/blog</code> created by other plugins.</p>
|
||
<p>Next, let's look at how the three plugins structure their own "boxes of subroutes".</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="pages-routing">Pages routing<a href="#pages-routing" class="hash-link" aria-label="Direct link to Pages routing" title="Direct link to Pages routing"></a></h3>
|
||
<p>Pages routing are straightforward: the file paths directly map to URLs, without any other way to customize. See the <a href="/docs/creating-pages#routing">pages docs</a> for more information.</p>
|
||
<p>The component used for Markdown pages is <code>@theme/MDXPage</code>. React pages are directly used as the route's component.</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="blog-routing">Blog routing<a href="#blog-routing" class="hash-link" aria-label="Direct link to Blog routing" title="Direct link to Blog routing"></a></h3>
|
||
<p>The blog creates the following routes:</p>
|
||
<ul>
|
||
<li><strong>Posts list pages</strong>: <code>/</code>, <code>/page/2</code>, <code>/page/3</code>...<!-- -->
|
||
<ul>
|
||
<li>The route is customizable through the <code>pageBasePath</code> option.</li>
|
||
<li>The component is <code>@theme/BlogListPage</code>.</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>Post pages</strong>: <code>/2021/11/21/algolia-docsearch-migration</code>, <code>/2021/05/12/announcing-docusaurus-two-beta</code>...<!-- -->
|
||
<ul>
|
||
<li>Generated from each Markdown post.</li>
|
||
<li>The routes are fully customizable through the <code>slug</code> front matter.</li>
|
||
<li>The component is <code>@theme/BlogPostPage</code>.</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>Tags list page</strong>: <code>/tags</code>
|
||
<ul>
|
||
<li>The route is customizable through the <code>tagsBasePath</code> option.</li>
|
||
<li>The component is <code>@theme/BlogTagsListPage</code>.</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>Tag pages</strong>: <code>/tags/adoption</code>, <code>/tags/beta</code>...<!-- -->
|
||
<ul>
|
||
<li>Generated through the tags defined in each post's front matter.</li>
|
||
<li>The routes always have base defined in <code>tagsBasePath</code>, but the subroutes are customizable through the tag's <code>permalink</code> field.</li>
|
||
<li>The component is <code>@theme/BlogTagsPostsPage</code>.</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>Archive page</strong>: <code>/archive</code>
|
||
<ul>
|
||
<li>The route is customizable through the <code>archiveBasePath</code> option.</li>
|
||
<li>The component is <code>@theme/BlogArchivePage</code>.</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="docs-routing">Docs routing<a href="#docs-routing" class="hash-link" aria-label="Direct link to Docs routing" title="Direct link to Docs routing"></a></h3>
|
||
<p>The docs is the only plugin that creates <strong>nested routes</strong>. At the top, it registers <a href="/docs/versioning"><strong>version paths</strong></a>: <code>/</code>, <code>/next</code>, <code>/2.0.0-beta.13</code>... which provide the version context, including the layout and sidebar. This ensures that when switching between individual docs, the sidebar's state is preserved, and that you can switch between versions through the navbar dropdown while staying on the same doc. The component used is <code>@theme/DocPage</code>.</p>
|
||
<!-- -->
|
||
<!-- -->
|
||
<p>The individual docs are rendered in the remaining space after the navbar, footer, sidebar, etc. have all been provided by the <code>DocPage</code> component. For example, this page, <code>/docs/advanced/routing</code>, is generated from the file at <code>./docs/<!-- -->advanced/routing.md</code>. The component used is <code>@theme/DocItem</code>.</p>
|
||
<p>The doc's <code>slug</code> front matter customizes the last part of the route, but the base route is always defined by the plugin's <code>routeBasePath</code> and the version's <code>path</code>.</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="file-paths-and-url-paths">File paths and URL paths<a href="#file-paths-and-url-paths" class="hash-link" aria-label="Direct link to File paths and URL paths" title="Direct link to File paths and URL paths"></a></h3>
|
||
<p>Throughout the documentation, we always try to be unambiguous about whether we are talking about file paths or URL paths. Content plugins usually map file paths directly to URL paths, for example, <code>./docs/advanced/routing.md</code> will become <code>/docs/advanced/routing</code>. However, with <code>slug</code>, you can make URLs totally decoupled from the file structure.</p>
|
||
<p>When writing links in Markdown, you could either mean a <em>file path</em>, or a <em>URL path</em>, which Docusaurus would use several heuristics to determine.</p>
|
||
<ul>
|
||
<li>If the path has a <code>@site</code> prefix, it is <em>always</em> an asset file path.</li>
|
||
<li>If the path has an <code>http(s)://</code> prefix, it is <em>always</em> a URL path.</li>
|
||
<li>If the path doesn't have an extension, it is a URL path. For example, a link <code>[page](../plugins)</code> on a page with URL <code>/docs/advanced/routing</code> will link to <code>/docs/plugins</code>. Docusaurus will only detect broken links when building your site (when it knows the full route structure), but will make no assumptions about the existence of a file. It is exactly equivalent to writing <code><a href="../plugins">page</a></code> in a JSX file.</li>
|
||
<li>If the path has an <code>.md(x)</code> extension, Docusaurus would try to resolve that Markdown file to a URL, and replace the file path with a URL path.</li>
|
||
<li>If the path has any other extension, Docusaurus would treat it as <a href="/docs/markdown-features/assets">an asset</a> and bundle it.</li>
|
||
</ul>
|
||
<p>The following directory structure may help you visualize this file → URL mapping. Assume that there's no slug customization in any page.</p>
|
||
<details class="details_Nokh alert alert--info details_Cn_P" data-collapsed="true"><summary>A sample site structure</summary><div><div class="collapsibleContent_EoA1"><div class="language-bash codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-bash codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token builtin class-name" style="color:#116329">.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├── blog </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># blog plugin has routeBasePath: '/blog'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ├── </span><span class="token number" style="color:#005CC5">2019</span><span class="token plain">-05-28-first-blog-post.md </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># -> /blog/2019/05/28/first-blog-post</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ├── </span><span class="token number" style="color:#005CC5">2019</span><span class="token plain">-05-29-long-blog-post.md </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># -> /blog/2019/05/29/long-blog-post</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ├── </span><span class="token number" style="color:#005CC5">2021</span><span class="token plain">-08-01-mdx-blog-post.mdx </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># -> /blog/2021/08/01/mdx-blog-post</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ └── </span><span class="token number" style="color:#005CC5">2021</span><span class="token plain">-08-26-welcome</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ├── docusaurus-plushie-banner.jpeg</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ └── index.md </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># -> /blog/2021/08/26/welcome</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├── docs </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># docs plugin has routeBasePath: '/docs'; current version has base path '/'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ├── intro.md </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># -> /docs/intro</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ├── tutorial-basics</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ ├── _category_.json</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ ├── congratulations.md </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># -> /docs/tutorial-basics/congratulations</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ └── markdown-features.mdx </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># -> /docs/tutorial-basics/markdown-features</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ └── tutorial-extras</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ├── _category_.json</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ├── manage-docs-versions.md </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># -> /docs/tutorial-extras/manage-docs-versions</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ └── translate-your-site.md </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># -> /docs/tutorial-extras/translate-your-site</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├── src</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ └── pages </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># pages plugin has routeBasePath: '/'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ├── index.module.css</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ├── index.tsx </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># -> /</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ └── markdown-page.md </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># -> /markdown-page</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">└── versioned_docs</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> └── version-1.0.0 </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># version has base path '/1.0.0'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> ├── intro.md </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># -> /docs/1.0.0/intro</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> ├── tutorial-basics</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> │ ├── _category_.json</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> │ ├── congratulations.md </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># -> /docs/1.0.0/tutorial-basics/congratulations</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> │ └── markdown-features.mdx </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># -> /docs/1.0.0/tutorial-basics/markdown-features</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> └── tutorial-extras</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> ├── _category_.json</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> ├── manage-docs-versions.md </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># -> /docs/1.0.0/tutorial-extras/manage-docs-versions</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> └── translate-your-site.md </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># -> /docs/1.0.0/tutorial-extras/translate-your-site</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></details>
|
||
<p>So much about content plugins. Let's take one step back and talk about how routing works in a Docusaurus app in general.</p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="routes-become-html-files">Routes become HTML files<a href="#routes-become-html-files" class="hash-link" aria-label="Direct link to Routes become HTML files" title="Direct link to Routes become HTML files"></a></h2>
|
||
<p>Because Docusaurus is a server-side rendering framework, all routes generated will be server-side rendered into static HTML files. If you are familiar with the behavior of HTTP servers like <a href="https://httpd.apache.org/docs/trunk/getting-started.html" target="_blank" rel="noopener noreferrer">Apache2</a>, you will understand how this is done: when the browser sends a request to the route <code>/docs/advanced/routing</code>, the server interprets that as request for the HTML file <code>/docs/advanced/routing/index.html</code>, and returns that.</p>
|
||
<p>The <code>/docs/advanced/routing</code> route can correspond to either <code>/docs/advanced/routing/index.html</code> or <code>/docs/advanced/routing.html</code>. Some hosting providers differentiate between them using the presence of a trailing slash, and may or may not tolerate the other. Read more in the <a href="https://github.com/slorber/trailing-slash-guide" target="_blank" rel="noopener noreferrer">trailing slash guide</a>.</p>
|
||
<p>For example, the build output of the directory above is (ignoring other assets and JS bundle):</p>
|
||
<details class="details_Nokh alert alert--info details_Cn_P" data-collapsed="true"><summary>Output of the above workspace</summary><div><div class="collapsibleContent_EoA1"><div class="language-bash codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-bash codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token plain">build</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├── </span><span class="token number" style="color:#005CC5">404</span><span class="token plain">.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /404/</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├── blog</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ├── archive</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ └── index.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /blog/archive/</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ├── first-blog-post</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ └── index.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /blog/first-blog-post/</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ├── index.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /blog/</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ├── long-blog-post</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ └── index.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /blog/long-blog-post/</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ├── mdx-blog-post</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ └── index.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /blog/mdx-blog-post/</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ├── tags</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ ├── docusaurus</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ │ └── index.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /blog/tags/docusaurus/</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ ├── hola</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ │ └── index.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /blog/tags/hola/</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ └── index.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /blog/tags/</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ └── welcome</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ └── index.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /blog/welcome/</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├── docs</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ├── </span><span class="token number" style="color:#005CC5">1.0</span><span class="token plain">.0</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ ├── intro</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ │ └── index.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /docs/1.0.0/intro/</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ ├── tutorial-basics</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ │ ├── congratulations</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ │ │ └── index.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /docs/1.0.0/tutorial-basics/congratulations/</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ │ └── markdown-features</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ │ └── index.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /docs/1.0.0/tutorial-basics/markdown-features/</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ └── tutorial-extras</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ ├── manage-docs-versions</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ │ └── index.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /docs/1.0.0/tutorial-extras/manage-docs-versions/</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ └── translate-your-site</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ └── index.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /docs/1.0.0/tutorial-extras/translate-your-site/</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ├── intro</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ └── index.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /docs/1.0.0/intro/</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ├── tutorial-basics</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ ├── congratulations</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ │ └── index.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /docs/tutorial-basics/congratulations/</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ └── markdown-features</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ └── index.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /docs/tutorial-basics/markdown-features/</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ └── tutorial-extras</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ├── manage-docs-versions</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ └── index.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /docs/tutorial-extras/manage-docs-versions/</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ └── translate-your-site</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ └── index.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /docs/tutorial-extras/translate-your-site/</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├── index.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">└── markdown-page</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> └── index.html </span><span class="token comment" style="color:#6B6B6B;font-style:italic"># /markdown-page/</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></details>
|
||
<p>If <code>trailingSlash</code> is set to <code>false</code>, the build would emit <code>intro.html</code> instead of <code>intro/index.html</code>.</p>
|
||
<p>All HTML files will reference its JS assets using absolute URLs, so in order for the correct assets to be located, you have to configure the <code>baseUrl</code> field. Note that <code>baseUrl</code> doesn't affect the emitted bundle's file structure: the base URL is one level above the Docusaurus routing system. You can see the aggregate of <code>url</code> and <code>baseUrl</code> as the actual location of your Docusaurus site.</p>
|
||
<p>For example, the emitted HTML would contain links like <code><link rel="preload" href="/assets/js/runtime~main.7ed5108a.js" as="script"></code>. Because absolute URLs are resolved from the host, if the bundle placed under the path <code>https://example.com/base/</code>, the link will point to <code>https://example.com/assets/js/runtime~main.7ed5108a.js</code>, which is, well, non-existent. By specifying <code>/base/</code> as base URL, the link will correctly point to <code>/base/assets/js/runtime~main.7ed5108a.js</code>.</p>
|
||
<p>Localized sites have the locale as part of the base URL as well. For example, <code>https://docusaurus.io/zh-CN/docs/advanced/routing/</code> has base URL <code>/zh-CN/</code>.</p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="generating-and-accessing-routes">Generating and accessing routes<a href="#generating-and-accessing-routes" class="hash-link" aria-label="Direct link to Generating and accessing routes" title="Direct link to Generating and accessing routes"></a></h2>
|
||
<p>The <code>addRoute</code> lifecycle action is used to generate routes. It registers a piece of route config to the route tree, giving a route, a component, and props that the component needs. The props and the component are both provided as paths for the bundler to <code>require</code>, because as explained in the <a href="/docs/advanced/architecture">architecture overview</a>, server and client only communicate through temp files.</p>
|
||
<p>All routes are aggregated in <code>.docusaurus/routes.js</code>, which you can view with the debug plugin's <a href="/__docusaurus/debug/routes">routes panel</a>.</p>
|
||
<p>On the client side, we offer <code>@docusaurus/router</code> to access the page's route. <code>@docusaurus/router</code> is a re-export of the <a href="https://www.npmjs.com/package/react-router-dom/v/5.3.0" target="_blank" rel="noopener noreferrer"><code>react-router-dom</code></a> package. For example, you can use <code>useLocation</code> to get the current page's <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location" target="_blank" rel="noopener noreferrer">location</a>, and <code>useHistory</code> to access the <a href="https://developer.mozilla.org/en-US/docs/Web/API/History" target="_blank" rel="noopener noreferrer">history object</a>. (They are not the same as the browser API, although similar in functionality. Refer to the React Router documentation for specific APIs.)</p>
|
||
<p>This API is <strong>SSR safe</strong>, as opposed to the browser-only <code>window.location</code>.</p>
|
||
<div class="language-jsx codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">myComponent.js</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-jsx codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'react'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports">useLocation</span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'@docusaurus/router'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#8250DF">PageRoute</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// React router provides the current component's route, even in SSR</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> </span><span class="token dom variable" style="color:#E36209">location</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">useLocation</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">span</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"> We are currently on </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">code</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token punctuation" style="color:#393A34">{</span><span class="token dom variable" style="color:#E36209">location</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">pathname</span><span class="token punctuation" style="color:#393A34">}</span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#22863A">code</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#22863A">span</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<!-- -->
|
||
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y text--truncate">http://localhost:3000</div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><span>We are currently on <code>/docs/advanced/routing</code></span></div></div>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="escaping-from-spa-redirects">Escaping from SPA redirects<a href="#escaping-from-spa-redirects" class="hash-link" aria-label="Direct link to Escaping from SPA redirects" title="Direct link to Escaping from SPA redirects"></a></h2>
|
||
<p>Docusaurus builds a <a href="https://developer.mozilla.org/en-US/docs/Glossary/SPA" target="_blank" rel="noopener noreferrer">single-page application</a>, where route transitions are done through the <code>history.push()</code> method of React router. This operation is done on the client side. However, the prerequisite for a route transition to happen this way is that the target URL is known to our router. Otherwise, the router catches this path and displays a 404 page instead.</p>
|
||
<p>If you put some HTML pages under the <code>static</code> folder, they will be copied to the build output and therefore become accessible as part of your website, yet it's not part of the Docusaurus route system. We provide a <code>pathname://</code> protocol that allows you to redirect to another part of your domain in a non-SPA fashion, as if this route is an external link.</p>
|
||
<div class="language-md codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-md codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token list punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token url" style="color:#36acaa">[</span><span class="token url content" style="color:#36acaa">pathname:///pure-html</span><span class="token url" style="color:#36acaa">](</span><span class="token url" style="color:#36acaa">pathname:///pure-html</span><span class="token url" style="color:#36acaa">)</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y text--truncate">http://localhost:3000</div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><ul>
|
||
<li><a href="/pure-html" target="_blank" rel="noopener noreferrer"><code>pathname:///pure-html</code></a></li>
|
||
</ul></div></div>
|
||
<p>The <code>pathname://</code> protocol is useful for referencing any content in the static folder. For example, Docusaurus would convert <a href="/docs/markdown-features/assets#static-assets">all Markdown static assets to require() calls</a>. You can use <code>pathname://</code> to keep it a regular link instead of being hashed by Webpack.</p>
|
||
<div class="language-md codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">my-doc.md</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-md codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token url operator" style="color:#D73A49">!</span><span class="token url" style="color:#36acaa">[</span><span class="token url content" style="color:#36acaa">An image from the static</span><span class="token url" style="color:#36acaa">](</span><span class="token url" style="color:#36acaa">pathname:///img/docusaurus.png</span><span class="token url" style="color:#36acaa">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token url" style="color:#36acaa">[</span><span class="token url content" style="color:#36acaa">An asset from the static</span><span class="token url" style="color:#36acaa">](</span><span class="token url" style="color:#36acaa">pathname:///files/asset.pdf</span><span class="token url" style="color:#36acaa">)</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>Docusaurus will only strip the <code>pathname://</code> prefix without processing the content.</p></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col"><a href="https://github.com/facebook/docusaurus/edit/main/website/docs/advanced/routing.mdx" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_IMw_" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_OHCJ"><span class="theme-last-updated">Last updated<!-- --> on <b><time datetime="2024-04-05T12:22:32.000Z" itemprop="dateModified">Apr 5, 2024</time></b> by <b>Tomy Hsieh</b></span></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/docs/advanced/plugins"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Plugins</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/docs/advanced/ssg"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Static site generation</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_RLlU thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#routing-in-content-plugins" class="table-of-contents__link toc-highlight">Routing in content plugins</a><ul><li><a href="#pages-routing" class="table-of-contents__link toc-highlight">Pages routing</a></li><li><a href="#blog-routing" class="table-of-contents__link toc-highlight">Blog routing</a></li><li><a href="#docs-routing" class="table-of-contents__link toc-highlight">Docs routing</a></li><li><a href="#file-paths-and-url-paths" class="table-of-contents__link toc-highlight">File paths and URL paths</a></li></ul></li><li><a href="#routes-become-html-files" class="table-of-contents__link toc-highlight">Routes become HTML files</a></li><li><a href="#generating-and-accessing-routes" class="table-of-contents__link toc-highlight">Generating and accessing routes</a></li><li><a href="#escaping-from-spa-redirects" class="table-of-contents__link toc-highlight">Escaping from SPA redirects</a></li></ul></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Learn</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs">Introduction</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/installation">Installation</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/migration">Migration from v1 to v2</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/docusaurus" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a class="footer__link-item" href="/feature-requests">Feature Requests</a></li><li class="footer__item"><a href="https://discordapp.com/invite/docusaurus" target="_blank" rel="noopener noreferrer" class="footer__link-item">Discord<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a class="footer__link-item" href="/community/support">Help</a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a class="footer__link-item" href="/changelog">Changelog</a></li><li class="footer__item"><a href="https://github.com/facebook/docusaurus" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://twitter.com/docusaurus" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item">
|
||
<a href="https://www.netlify.com" target="_blank" rel="noreferrer noopener" aria-label="Deploys by Netlify">
|
||
<img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" width="114" height="51">
|
||
</a>
|
||
</li><li class="footer__item">
|
||
<a href="https://argos-ci.com" target="_blank" rel="noreferrer noopener" aria-label="Covered by Argos">
|
||
<img src="https://argos-ci.com/badge.svg" alt="Covered by Argos" width="133" height="20">
|
||
</a>
|
||
</li></ul></div><div class="col footer__col"><div class="footer__title">Legal</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/cookie-policy/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Cookie Policy<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="margin-bottom--sm"><a href="https://opensource.fb.com" rel="noopener noreferrer" class="footerLogoLink_CiM_"><img src="/img/meta_opensource_logo_negative.svg" alt="Meta Open Source Logo" class="footer__logo themedComponent_bJGS themedComponent--light_LEkC"><img src="/img/meta_opensource_logo_negative.svg" alt="Meta Open Source Logo" class="footer__logo themedComponent_bJGS themedComponent--dark_jnGk"></a></div><div class="footer__copyright">Copyright © 2024 Meta Platforms, Inc. Built with Docusaurus.</div></div></div></footer></div>
|
||
</body>
|
||
</html> |