reactrouter.com

151.101.65.91

, ,

151.101.1.91

, ,

{
  "error": false,
  "result": {
    "success": true,
    "ogTitle": "React Router Official Documentation",
    "ogLocale": "en",
    "favicon": "/favicon-light.png",
    "charset": "utf-8",
    "requestUrl": "https://reactrouter.com"
  },
  "response": {}
}

{
  "Google Analytics": "Google Analytics offers a host of compelling features and benefits for everyone from senior executives and advertising and marketing professionals to site owners and content developers.",
  "Google Universal Analytics": "The analytics.js JavaScript snippet is a new way to measure how users interact with your website. It is similar to the previous Google tracking code, ga.js, but offers more flexibility for developers to customize their implementations.",
  "Fastly": "Real-time Analytics and CDN platform. Analyze your web and server traffic patterns in real-time.",
  "CrUX Dataset": "CrUX is a data collection system that gathers information about how real users interact with websites. This website is included in the user experiences data gathered from Google Chrome and thus considered sufficiently popular on the Internet.",
  "CrUX Top 500k": "Relative measure of site popularity within the CrUX dataset, measured by the total number of navigations on the origin. This site is in the top 500k.",
  "Cloudflare Radar": "The website appears on the Cloudflare Radar Top 1m sites list",
  "Cloudflare Radar Top 500k": "The website appears in the Cloudflare Radar Top 500,000.",
  "Cloudflare Radar Top 200k": "The website appears in the Cloudflare Radar Top 200,000.",
  "Remix": "Full stack web framework.",
  "Express": "A web application framework for node node.js - expressjs.",
  "Viewport Meta": "This page uses the viewport meta tag which means the content may be optimized for mobile content.",
  "IPhone / Mobile Compatible": "The website contains code that allows the page to support IPhone / Mobile Content.",
  "Apple Mobile Web Clips Icon": "This page contains an icon for iPhone, iPad and iTouch devices.",
  "Cloudflare": "Automatically optimizes the delivery of your web pages so your visitors get the fastest page load times and best performance.",
  "HTML5 History API": "A standardized way to manipulate the browser history via script.",
  "JavaScript Modules": "Modern browsers now support native module functionality, optimizing loading and efficiency. Import and export statements are key for using native JavaScript modules.",
  "GitHub": "The website mentions github.com in some form.",
  "SSL by Default": "The website redirects traffic to an HTTPS/SSL version by default.",
  "LetsEncrypt": "Let’s Encrypt is a free open Certificate Authority.",
  "HSTS": "Forces browsers to only communicate with the site using HTTPS.",
  "Cloudflare DNS": "DNS services provided by Cloudflare.",
  "Cloudflare Hosting": "Supercharged web hosting service.",
  "Fly": "Deploy app servers close to users.",
  "Fastly Hosted": "Hosted at Fastly",
  "Fastly Load Balancer": "Hosted on Fastly's Load Balancing system.",
  "U.S. Server Location": "The web server is located in the United States.",
  "IPv6": "The website has an IPv6 record.",
  "Varnish": "Varnish is a web accelerator / reverse proxy caching server.",
  "Google Webmaster": "Webmaster tools provide you with a free and easy way to make your site more Google-friendly."
}

[
  {
    "url": "https://reactrouter.com",
    "technologies": [
      {
        "slug": "varnish",
        "name": "Varnish",
        "icon": "Varnish.svg",
        "cpe": "cpe:2.3:a:varnish-software:varnish_cache:*:*:*:*:*:*:*:*",
        "versions": [],
        "categories": [
          {
            "id": 23,
            "slug": "caching",
            "name": "Caching"
          }
        ],
        "confirmedAt": 1724982823
      },
      {
        "slug": "react",
        "name": "React",
        "icon": "React.svg",
        "cpe": "cpe:2.3:a:facebook:react:*:*:*:*:*:*:*:*",
        "versions": [],
        "categories": [
          {
            "id": 12,
            "slug": "javascript-frameworks",
            "name": "JavaScript frameworks"
          }
        ],
        "confirmedAt": 1724982823
      },
      {
        "slug": "remix",
        "name": "Remix",
        "icon": "Remix.svg",
        "versions": [],
        "categories": [
          {
            "id": 18,
            "slug": "web-frameworks",
            "name": "Web frameworks"
          },
          {
            "id": 22,
            "slug": "web-servers",
            "name": "Web servers"
          }
        ],
        "confirmedAt": 1724982823
      },
      {
        "slug": "react-router",
        "name": "React Router",
        "icon": "React Router.svg",
        "versions": [
          "6"
        ],
        "categories": [
          {
            "id": 12,
            "slug": "javascript-frameworks",
            "name": "JavaScript frameworks"
          }
        ],
        "confirmedAt": 1724982823
      },
      {
        "slug": "fly-io",
        "name": "Fly.io",
        "icon": "Fly.io.svg",
        "versions": [],
        "categories": [
          {
            "id": 62,
            "slug": "paas",
            "name": "PaaS"
          }
        ],
        "confirmedAt": 1724982823
      },
      {
        "slug": "priority-hints",
        "name": "Priority Hints",
        "icon": "Priority Hints.svg",
        "versions": [],
        "categories": [
          {
            "id": 92,
            "slug": "performance",
            "name": "Performance"
          }
        ],
        "confirmedAt": 1724982823
      },
      {
        "slug": "hsts",
        "name": "HSTS",
        "icon": "default.svg",
        "versions": [],
        "categories": [
          {
            "id": 16,
            "slug": "security",
            "name": "Security"
          }
        ],
        "confirmedAt": 1724982823
      },
      {
        "slug": "http-3",
        "name": "HTTP/3",
        "icon": "HTTP3.svg",
        "versions": [],
        "categories": [
          {
            "id": 19,
            "slug": "miscellaneous",
            "name": "Miscellaneous"
          }
        ],
        "confirmedAt": 1724982823
      }
    ]
  }
]

{
  "data": {
    "total": 0,
    "personal_emails": 0,
    "generic_emails": 0,
    "department": {
      "executive": 0,
      "it": 0,
      "finance": 0,
      "management": 0,
      "sales": 0,
      "legal": 0,
      "support": 0,
      "hr": 0,
      "marketing": 0,
      "communication": 0,
      "education": 0,
      "design": 0,
      "health": 0,
      "operations": 0
    },
    "seniority": {
      "junior": 0,
      "senior": 0,
      "executive": 0
    }
  },
  "meta": {
    "params": {
      "domain": "reactrouter.com",
      "company": null,
      "type": null
    }
  }
}

{
  "whois.verisign-grs.com": {
    "Domain Status": [
      "clientDeleteProhibited https://icann.org/epp#clientDeleteProhibited",
      "clientTransferProhibited https://icann.org/epp#clientTransferProhibited",
      "clientUpdateProhibited https://icann.org/epp#clientUpdateProhibited"
    ],
    "Name Server": [
      "ANIRBAN.NS.CLOUDFLARE.COM",
      "ARON.NS.CLOUDFLARE.COM"
    ],
    "Domain Name": "REACTROUTER.COM",
    "Registry Domain ID": "2370424772_DOMAIN_COM-VRSN",
    "Registrar WHOIS Server": "whois.markmonitor.com",
    "Registrar URL": "http://www.markmonitor.com",
    "Updated Date": "2023-09-29T18:15:29Z",
    "Created Date": "2019-03-18T05:03:04Z",
    "Expiry Date": "2026-03-18T05:03:04Z",
    "Registrar": "MarkMonitor Inc.",
    "Registrar IANA ID": "292",
    "Registrar Abuse Contact Email": "[email protected]",
    "Registrar Abuse Contact Phone": "+1.2086851750",
    "DNSSEC": "unsigned",
    "URL of the ICANN Whois Inaccuracy Complaint Form": "https://www.icann.org/wicf/",
    ">>> Last update of whois database": "2025-02-01T01:17:30Z <<<",
    "text": [
      "For more information on Whois status codes, please visit https://icann.org/epp",
      "",
      "NOTICE: The expiration date displayed in this record is the date the",
      "registrar's sponsorship of the domain name registration in the registry is",
      "currently set to expire. This date does not necessarily reflect the expiration",
      "date of the domain name registrant's agreement with the sponsoring",
      "registrar.  Users may consult the sponsoring registrar's Whois database to",
      "view the registrar's reported date of expiration for this registration.",
      "",
      "TERMS OF USE: You are not authorized to access or query our Whois",
      "database through the use of electronic processes that are high-volume and",
      "automated except as reasonably necessary to register domain names or",
      "modify existing registrations; the Data in VeriSign Global Registry",
      "Services' (\"VeriSign\") Whois database is provided by VeriSign for",
      "information purposes only, and to assist persons in obtaining information",
      "about or related to a domain name registration record. VeriSign does not",
      "guarantee its accuracy. By submitting a Whois query, you agree to abide",
      "by the following terms of use: You agree that you may use this Data only",
      "for lawful purposes and that under no circumstances will you use this Data",
      "to: (1) allow, enable, or otherwise support the transmission of mass",
      "unsolicited, commercial advertising or solicitations via e-mail, telephone,",
      "or facsimile; or (2) enable high volume, automated, electronic processes",
      "that apply to VeriSign (or its computer systems). The compilation,",
      "repackaging, dissemination or other use of this Data is expressly",
      "prohibited without the prior written consent of VeriSign. You agree not to",
      "use electronic processes that are automated and high-volume to access or",
      "query the Whois database except as reasonably necessary to register",
      "domain names or modify existing registrations. VeriSign reserves the right",
      "to restrict your access to the Whois database in its sole discretion to ensure",
      "operational stability.  VeriSign may restrict or terminate your access to the",
      "Whois database for failure to abide by these terms of use. VeriSign",
      "reserves the right to modify these terms at any time.",
      "",
      "The Registry database contains ONLY .COM, .NET, .EDU domains and",
      "Registrars."
    ]
  },
  "whois.markmonitor.com": {
    "Domain Status": [
      "clientUpdateProhibited (https://www.icann.org/epp#clientUpdateProhibited)",
      "clientTransferProhibited (https://www.icann.org/epp#clientTransferProhibited)",
      "clientDeleteProhibited (https://www.icann.org/epp#clientDeleteProhibited)"
    ],
    "Name Server": [
      "aron.ns.cloudflare.com",
      "anirban.ns.cloudflare.com"
    ],
    "Domain Name": "reactrouter.com",
    "Registry Domain ID": "2370424772_DOMAIN_COM-VRSN",
    "Registrar WHOIS Server": "whois.markmonitor.com",
    "Registrar URL": "http://www.markmonitor.com",
    "Updated Date": "2024-07-02T16:37:32+0000",
    "Created Date": "2019-03-18T05:03:04+0000",
    "Expiry Date": "2026-03-18T05:03:04+0000",
    "Registrar": "MarkMonitor, Inc.",
    "Registrar IANA ID": "292",
    "Registrar Abuse Contact Email": "[email protected]",
    "Registrar Abuse Contact Phone": "+1.2086851750",
    "Registrant Organization": "Shopify Inc.",
    "Registrant State/Province": "ON",
    "Registrant Country": "CA",
    "Registrant Email": "Select Request Email Form at https://domains.markmonitor.com/whois/reactrouter.com",
    "Admin Organization": "Shopify Inc.",
    "Admin State/Province": "ON",
    "Admin Country": "CA",
    "Admin Email": "Select Request Email Form at https://domains.markmonitor.com/whois/reactrouter.com",
    "Tech Organization": "Shopify Inc.",
    "Tech State/Province": "ON",
    "Tech Country": "CA",
    "Tech Email": "Select Request Email Form at https://domains.markmonitor.com/whois/reactrouter.com",
    "DNSSEC": "unsigned",
    "URL of the ICANN WHOIS Data Problem Reporting System": "http://wdprs.internic.net/",
    ">>> Last update of WHOIS database": "2025-02-01T01:17:45+0000 <<<",
    "text": [
      "For more information on WHOIS status codes, please visit:",
      "https://www.icann.org/resources/pages/epp-status-codes",
      "",
      "If you wish to contact this domain’s Registrant, Administrative, or Technical",
      "contact, and such email address is not visible above, you may do so via our web",
      "form, pursuant to ICANN’s Temporary Specification. To verify that you are not a",
      "robot, please enter your email address to receive a link to a page that",
      "facilitates email communication with the relevant contact(s).",
      "",
      "Web-based WHOIS:",
      "https://domains.markmonitor.com/whois",
      "",
      "If you have a legitimate interest in viewing the non-public WHOIS details, send",
      "your request and the reasons for your request to [email protected]",
      "and specify the domain name in the subject line. We will review that request and",
      "may ask for supporting documentation and explanation.",
      "",
      "The data in MarkMonitor’s WHOIS database is provided for information purposes,",
      "and to assist persons in obtaining information about or related to a domain",
      "name’s registration record. While MarkMonitor believes the data to be accurate,",
      "the data is provided \"as is\" with no guarantee or warranties regarding its",
      "accuracy.",
      "",
      "By submitting a WHOIS query, you agree that you will use this data only for",
      "lawful purposes and that, under no circumstances will you use this data to:",
      "(1) allow, enable, or otherwise support the transmission by email, telephone,",
      "or facsimile of mass, unsolicited, commercial advertising, or spam; or",
      "(2) enable high volume, automated, or electronic processes that send queries,",
      "data, or email to MarkMonitor (or its systems) or the domain name contacts (or",
      "its systems).",
      "",
      "MarkMonitor reserves the right to modify these terms at any time.",
      "",
      "By submitting this query, you agree to abide by this policy.",
      "",
      "MarkMonitor Domain Management(TM)",
      "Protecting companies and consumers in a digital world.",
      "",
      "Visit MarkMonitor at https://www.markmonitor.com",
      "Contact us at +1.8007459229",
      "In Europe, at +44.02032062220"
    ]
  }
}

reactrouter.com

<!DOCTYPE html><html lang="en" class=""><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="preload" as="image" href="/assets/icons-DB3ijYGZ.svg" fetchPriority="high"/><link rel="icon" href="/favicon-light.png" type="image/png" media="(prefers-color-scheme: light)"/><link rel="icon" href="/favicon-dark.png" type="image/png" media="(prefers-color-scheme: dark)"/><title>React Router Home | React Router</title><meta name="twitter:title" content="React Router Home "/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@remix_run"/><meta name="twitter:creator" content="@remix_run"/><meta name="twitter:image" content="https://reactrouter.com/og-image.png"/><meta name="twitter:image:alt" content="React Router logo"/><meta name="og:title" content="React Router Home "/><meta name="og:image" content="https://reactrouter.com/og-image.png"/><meta name="og:image:alt" content="React Router logo"/><meta name="og:image:width" content="1200"/><meta name="og:image:height" content="627"/><meta name="docsearch:language" content="en"/><meta name="docsearch:version" content="7.0.0"/><meta name="robots" content="index,follow"/><meta name="googlebot" content="index,follow"/><link rel="modulepreload" href="/assets/entry.client-CrjhHbtS.js"/><link rel="modulepreload" href="/assets/chunk-W3FMU5Y5-BUr5hIcl.js"/><link rel="modulepreload" href="/assets/index-ohd1lys1.js"/><link rel="modulepreload" href="/assets/with-props-Djj6MXuF.js"/><link rel="modulepreload" href="/assets/docsearch-BJULtLot.js"/><link rel="modulepreload" href="/assets/icons-CeDkFKCJ.js"/><link rel="modulepreload" href="/assets/root-BBRtNIMS.js"/><link rel="modulepreload" href="/assets/index-BEXtJonk.js"/><link rel="modulepreload" href="/assets/docs-layout-xSj_tQL2.js"/><link rel="modulepreload" href="/assets/meta-_5CFb1fg.js"/><link rel="modulepreload" href="/assets/doc-DYb-wxfv.js"/><script> let colorScheme = "system"; if (colorScheme === "system") { let media = window.matchMedia("(prefers-color-scheme: dark)") if (media.matches) document.documentElement.classList.add("dark"); } </script><link rel="stylesheet" href="/assets/root-CD4lcuPl.css"/></head><body class="bg-white text-black antialiased selection:bg-blue-200 selection:text-black dark:bg-gray-900 dark:text-white dark:selection:bg-blue-800 dark:selection:text-white"><img src="/assets/icons-DB3ijYGZ.svg" alt="" hidden="" fetchPriority="high"/><div class="[--header-height:theme(spacing.16)] [--nav-width:theme(spacing.72)] lg:m-auto lg:max-w-[90rem]"><div class="sticky top-0 z-20"><div class="relative z-20 flex h-16 w-full items-center justify-between gap-2 border-b border-gray-50 bg-white px-4 text-gray-900 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 lg:px-8"><div class="flex w-full items-center gap-2 md:w-auto md:justify-between md:gap-4"><a class="hidden items-center gap-1 text-gray-900 dark:text-white md:flex" href="/home" data-discover="true"><svg aria-label="React Router logo, six dots in an upward triangle (one on top, two in the middle, three on the bottom) with a path of three highlighted and connected from top to bottom, next to the text React Router" class="h-14 w-40"><use href="/assets/icons-DB3ijYGZ.svg#logo"></use></svg></a><div class="flex items-center gap-2"><div class="inline-block"><div class="flex items-center"><details class="group relative"><summary title="latest" class="_no-triangle relative flex h-[40px] w-24 cursor-pointer list-none items-center justify-between gap-3 overflow-hidden whitespace-nowrap rounded-full px-3 border border-transparent bg-gray-100 hover:bg-gray-200 focus:border focus:border-gray-100 focus:bg-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:border-gray-400 dark:focus:bg-gray-700"><div>latest</div><svg aria-hidden="true" class="h-[18px] w-[18px] text-gray-400"><use href="/assets/icons-DB3ijYGZ.svg#dropdown-arrows"></use></svg></summary><div class="absolute z-20 w-40"><div class="relative top-1 rounded-lg border border-gray-100 bg-white py-2 shadow-lg dark:border-gray-400 dark:bg-gray-800 "><div class="px-4 pb-2 pt-2 text-xs font-bold uppercase tracking-wider text-gray-400 dark:text-gray-300">Branches</div><a class="relative pl-4 group items-center flex py-1 before:mr-4 before:relative before:top-px before:block before:h-1.5 before:w-1.5 before:rounded-full before:content-[''] font-bold text-red-brand before:bg-red-brand" href="/robots.txt/home" data-discover="true">latest (7.1.5)</a><a class="relative pl-4 group items-center flex py-1 before:mr-4 before:relative before:top-px before:block before:h-1.5 before:w-1.5 before:rounded-full before:content-[''] before:bg-transparent hover:bg-gray-50 active:text-red-brand dark:text-gray-200 dark:hover:bg-gray-700 dark:active:text-red-brand" href="/dev/robots.txt/home" data-discover="true">dev</a><div class="px-4 pb-2 pt-2 text-xs font-bold uppercase tracking-wider text-gray-400 dark:text-gray-300">Versions</div><a class="relative pl-4 group items-center flex py-1 before:mr-4 before:relative before:top-px before:block before:h-1.5 before:w-1.5 before:rounded-full before:content-[''] before:bg-transparent hover:bg-gray-50 active:text-red-brand dark:text-gray-200 dark:hover:bg-gray-700 dark:active:text-red-brand" href="/7.1.5/home" data-discover="true">7.1.5</a><a class="relative pl-4 group items-center flex py-1 before:mr-4 before:relative before:top-px before:block before:h-1.5 before:w-1.5 before:rounded-full before:content-[''] before:bg-transparent hover:bg-gray-50 active:text-red-brand dark:text-gray-200 dark:hover:bg-gray-700 dark:active:text-red-brand" href="/6.29.0" data-discover="true">6.29.0</a><a href="https://v5.reactrouter.com/" class="relative pl-4 group items-center flex py-1 before:mr-4 before:relative before:top-px before:block before:h-1.5 before:w-1.5 before:rounded-full before:content-[''] after:absolute after:right-4 after:top-1 after:block after:-rotate-45 after:opacity-50 after:content-['→'] hover:bg-gray-50 active:text-red-brand dark:text-gray-200 dark:hover:bg-gray-700 dark:active:text-red-brand">v4/5.x</a><a href="https://github.com/remix-run/react-router/tree/v3.2.6/docs" class="relative pl-4 group items-center flex py-1 before:mr-4 before:relative before:top-px before:block before:h-1.5 before:w-1.5 before:rounded-full before:content-[''] after:absolute after:right-4 after:top-1 after:block after:-rotate-45 after:opacity-50 after:content-['→'] hover:bg-gray-50 active:text-red-brand dark:text-gray-200 dark:hover:bg-gray-700 dark:active:text-red-brand">v3.x</a></div></div></details><div class="mr-2 w-[1px] bg-gray-200 dark:bg-gray-600"></div><a class="font-bold text-gray-500 hover:underline dark:text-gray-300" href="https://api.reactrouter.com/v7/">API Reference</a></div></div></div></div><div class="flex gap-2 md:gap-4"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><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><details class="relative cursor-pointer"><summary class="_no-triangle focus:border-200 flex h-[40px] w-[40px] items-center justify-center rounded-full border border-transparent bg-gray-100 hover:bg-gray-200 focus:border focus:border-gray-100 focus:bg-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:border-gray-400 dark:focus:bg-gray-700"><svg class="hidden h-[24px] w-[24px] dark:inline"><use href="/assets/icons-DB3ijYGZ.svg#moon"></use></svg><svg class="h-[24px] w-[24px] dark:hidden"><use href="/assets/icons-DB3ijYGZ.svg#sun"></use></svg></summary><div class="absolute z-20 right-0 w-40"><div class="relative top-1 rounded-lg border border-gray-100 bg-white py-2 shadow-lg dark:border-gray-400 dark:bg-gray-800 "><form data-discover="true" action="/color-scheme" method="post"><input type="hidden" name="returnTo" value="/robots.txt/home"/><button value="light" class="flex w-full items-center gap-4 px-4 py-1 hover:bg-gray-50 active:text-red-brand dark:hover:bg-gray-700 dark:active:text-red-brand" name="colorScheme"><svg class="h-[18px] w-[18px]"><use href="/assets/icons-DB3ijYGZ.svg#sun"></use></svg> Light</button><button value="dark" class="flex w-full items-center gap-4 px-4 py-1 hover:bg-gray-50 active:text-red-brand dark:hover:bg-gray-700 dark:active:text-red-brand" name="colorScheme"><svg class="h-[18px] w-[18px]"><use href="/assets/icons-DB3ijYGZ.svg#moon"></use></svg> Dark</button><button value="system" disabled="" class="flex w-full items-center gap-4 px-4 py-1 text-red-brand" name="colorScheme"><svg class="h-[18px] w-[18px]"><use href="/assets/icons-DB3ijYGZ.svg#setting"></use></svg> System</button></form></div></div></details><div class="flex items-center gap-4"><a href="https://github.com/remix-run/react-router" class="hidden text-gray-400 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50 md:block" title="View code on GitHub"><svg aria-label="GitHub octocat logo in a circle" style="width:24px;height:24px"><use href="/assets/icons-DB3ijYGZ.svg#github"></use></svg></a><a href="https://rmx.as/discord" class="hidden text-gray-400 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50 md:block" title="Chat on Discord"><svg aria-label="Discord logo in a circle" style="width:24px;height:24px"><use href="/assets/icons-DB3ijYGZ.svg#discord"></use></svg></a></div></div></div><details class="group relative flex h-full flex-col lg:hidden "><summary tabindex="0" class="_no-triangle flex cursor-pointer select-none items-center gap-2 border-b border-gray-50 bg-white px-2 py-3 text-sm font-medium hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-gray-800 dark:active:bg-gray-700"><div class="flex items-center gap-2"><svg aria-hidden="true" class="hidden h-5 w-5 group-open:block"><use href="/assets/icons-DB3ijYGZ.svg#chevron-d"></use></svg><svg aria-hidden="true" class="h-5 w-5 group-open:hidden"><use href="/assets/icons-DB3ijYGZ.svg#chevron-r"></use></svg></div><div class="whitespace-nowrap font-bold">React Router Home</div></summary><div class="absolute h-[66vh] w-full overflow-auto overscroll-contain border-b bg-white p-3 shadow-2xl dark:border-gray-700 dark:bg-gray-900 dark:shadow-black"><nav><a class="relative -mx-4 flex items-center justify-between rounded-md px-4 py-3 font-bold hover:bg-gray-50 active:text-red-brand dark:hover:bg-gray-800 dark:active:text-red-brand" href="/start/changelog" data-discover="true">Changelog</a><div><details class="group relative flex flex-col" open=""><summary class="-mx-4 rounded-md px-4 py-3 transition-colors duration-100 _no-triangle block cursor-pointer select-none outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-brand dark:focus-visible:ring-gray-100 hover:bg-gray-50 active:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800 dark:active:bg-gray-700"><div class="flex h-5 w-full items-center justify-between font-bold">Getting Started<svg aria-hidden="true" class="hidden h-5 w-5 group-open:block"><use href="/assets/icons-DB3ijYGZ.svg#chevron-d"></use></svg><svg aria-hidden="true" class="h-5 w-5 group-open:hidden"><use href="/assets/icons-DB3ijYGZ.svg#chevron-r"></use></svg></div></summary><div class="mb-2"><div class="mb-2 ml-2"><div class="pb-2 pt-2 text-xs font-bold uppercase tracking-wider">Framework</div><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/framework/installation" data-discover="true">Installation </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/framework/routing" data-discover="true">Routing </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/framework/route-module" data-discover="true">Route Module </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/framework/rendering" data-discover="true">Rendering Strategies </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/framework/data-loading" data-discover="true">Data Loading </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/framework/actions" data-discover="true">Actions </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/framework/navigating" data-discover="true">Navigating </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/framework/pending-ui" data-discover="true">Pending UI </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/framework/testing" data-discover="true">Testing </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/framework/custom" data-discover="true">Custom Framework </a></div><div class="mb-2 ml-2"><div class="pb-2 pt-2 text-xs font-bold uppercase tracking-wider">Library</div><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/library/installation" data-discover="true">Installation </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/library/routing" data-discover="true">Routing </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/library/navigating" data-discover="true">Navigating </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/library/url-values" data-discover="true">URL Values </a></div></div></details></div><div><details class="group relative flex flex-col" open=""><summary class="-mx-4 rounded-md px-4 py-3 transition-colors duration-100 _no-triangle block cursor-pointer select-none outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-brand dark:focus-visible:ring-gray-100 hover:bg-gray-50 active:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800 dark:active:bg-gray-700"><div class="flex h-5 w-full items-center justify-between font-bold">Upgrading<svg aria-hidden="true" class="hidden h-5 w-5 group-open:block"><use href="/assets/icons-DB3ijYGZ.svg#chevron-d"></use></svg><svg aria-hidden="true" class="h-5 w-5 group-open:hidden"><use href="/assets/icons-DB3ijYGZ.svg#chevron-r"></use></svg></div></summary><div class="mb-2"><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/upgrading/v6" data-discover="true">Upgrading from v6 </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/upgrading/remix" data-discover="true">Upgrading from Remix </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/upgrading/component-routes" data-discover="true">Framework Adoption from Component Routes </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/upgrading/router-provider" data-discover="true">Framework Adoption from RouterProvider </a></div></details></div><div><details class="group relative flex flex-col" open=""><summary class="-mx-4 rounded-md px-4 py-3 transition-colors duration-100 _no-triangle block cursor-pointer select-none outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-brand dark:focus-visible:ring-gray-100 hover:bg-gray-50 active:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800 dark:active:bg-gray-700"><div class="flex h-5 w-full items-center justify-between font-bold">Tutorials<svg aria-hidden="true" class="hidden h-5 w-5 group-open:block"><use href="/assets/icons-DB3ijYGZ.svg#chevron-d"></use></svg><svg aria-hidden="true" class="h-5 w-5 group-open:hidden"><use href="/assets/icons-DB3ijYGZ.svg#chevron-r"></use></svg></div></summary><div class="mb-2"><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/tutorials/address-book" data-discover="true">Address Book </a></div></details></div><div><details class="group relative flex flex-col" open=""><summary class="-mx-4 rounded-md px-4 py-3 transition-colors duration-100 _no-triangle block cursor-pointer select-none outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-brand dark:focus-visible:ring-gray-100 hover:bg-gray-50 active:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800 dark:active:bg-gray-700"><div class="flex h-5 w-full items-center justify-between font-bold">How-Tos<svg aria-hidden="true" class="hidden h-5 w-5 group-open:block"><use href="/assets/icons-DB3ijYGZ.svg#chevron-d"></use></svg><svg aria-hidden="true" class="h-5 w-5 group-open:hidden"><use href="/assets/icons-DB3ijYGZ.svg#chevron-r"></use></svg></div></summary><div class="mb-2"><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/client-data" data-discover="true">Client Data </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/error-boundary" data-discover="true">Error Boundaries </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/error-reporting" data-discover="true">Error Reporting </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/fetchers" data-discover="true">Using Fetchers </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/file-route-conventions" data-discover="true">File Route Conventions </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/file-uploads" data-discover="true">File Uploads </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/form-validation" data-discover="true">Form Validation </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/headers" data-discover="true">HTTP Headers </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/pre-rendering" data-discover="true">Pre-Rendering </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/resource-routes" data-discover="true">Resource Routes </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/route-module-type-safety" data-discover="true">Route Module Type Safety </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/spa" data-discover="true">Single Page App (SPA) </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/status" data-discover="true">Status Codes </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/suspense" data-discover="true">Streaming with Suspense </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/view-transitions" data-discover="true">View Transitions </a></div></details></div><div><details class="group relative flex flex-col" open=""><summary class="-mx-4 rounded-md px-4 py-3 transition-colors duration-100 _no-triangle block cursor-pointer select-none outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-brand dark:focus-visible:ring-gray-100 hover:bg-gray-50 active:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800 dark:active:bg-gray-700"><div class="flex h-5 w-full items-center justify-between font-bold">Explanations<svg aria-hidden="true" class="hidden h-5 w-5 group-open:block"><use href="/assets/icons-DB3ijYGZ.svg#chevron-d"></use></svg><svg aria-hidden="true" class="h-5 w-5 group-open:hidden"><use href="/assets/icons-DB3ijYGZ.svg#chevron-r"></use></svg></div></summary><div class="mb-2"><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/explanation/code-splitting" data-discover="true">Automatic Code Splitting </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/explanation/hot-module-replacement" data-discover="true">Hot Module Replacement </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/explanation/progressive-enhancement" data-discover="true">Progressive Enhancement </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/explanation/race-conditions" data-discover="true">Race Conditions </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/explanation/sessions-and-cookies" data-discover="true">Sessions and Cookies </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/explanation/special-files" data-discover="true">Special Files </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/explanation/state-management" data-discover="true">State Management </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/explanation/type-safety" data-discover="true">Type Safety </a></div></details></div><div><details class="group relative flex flex-col" open=""><summary class="-mx-4 rounded-md px-4 py-3 transition-colors duration-100 _no-triangle block cursor-pointer select-none outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-brand dark:focus-visible:ring-gray-100 hover:bg-gray-50 active:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800 dark:active:bg-gray-700"><div class="flex h-5 w-full items-center justify-between font-bold">Community<svg aria-hidden="true" class="hidden h-5 w-5 group-open:block"><use href="/assets/icons-DB3ijYGZ.svg#chevron-d"></use></svg><svg aria-hidden="true" class="h-5 w-5 group-open:hidden"><use href="/assets/icons-DB3ijYGZ.svg#chevron-r"></use></svg></div></summary><div class="mb-2"><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/community/api-development-strategy" data-discover="true">API Development Strategy </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/community/contributing" data-discover="true">Contributing </a></div></details></div></nav></div></details></div><div class="block lg:flex"><div class="sticky bottom-0 top-16 hidden w-[--nav-width] flex-col gap-3 self-start overflow-auto py-6 pl-8 pr-6 lg:flex h-[calc(100vh-var(--header-height))]"><div class="[&_*:focus]:scroll-mt-[6rem]"><nav><a class="relative -mx-4 flex items-center justify-between rounded-md px-4 py-3 font-bold hover:bg-gray-50 active:text-red-brand dark:hover:bg-gray-800 dark:active:text-red-brand" href="/start/changelog" data-discover="true">Changelog</a><div><details class="group relative flex flex-col" open=""><summary class="-mx-4 rounded-md px-4 py-3 transition-colors duration-100 _no-triangle block cursor-pointer select-none outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-brand dark:focus-visible:ring-gray-100 hover:bg-gray-50 active:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800 dark:active:bg-gray-700"><div class="flex h-5 w-full items-center justify-between font-bold">Getting Started<svg aria-hidden="true" class="hidden h-5 w-5 group-open:block"><use href="/assets/icons-DB3ijYGZ.svg#chevron-d"></use></svg><svg aria-hidden="true" class="h-5 w-5 group-open:hidden"><use href="/assets/icons-DB3ijYGZ.svg#chevron-r"></use></svg></div></summary><div class="mb-2"><div class="mb-2 ml-2"><div class="pb-2 pt-2 text-xs font-bold uppercase tracking-wider">Framework</div><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/framework/installation" data-discover="true">Installation </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/framework/routing" data-discover="true">Routing </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/framework/route-module" data-discover="true">Route Module </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/framework/rendering" data-discover="true">Rendering Strategies </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/framework/data-loading" data-discover="true">Data Loading </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/framework/actions" data-discover="true">Actions </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/framework/navigating" data-discover="true">Navigating </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/framework/pending-ui" data-discover="true">Pending UI </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/framework/testing" data-discover="true">Testing </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/framework/custom" data-discover="true">Custom Framework </a></div><div class="mb-2 ml-2"><div class="pb-2 pt-2 text-xs font-bold uppercase tracking-wider">Library</div><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/library/installation" data-discover="true">Installation </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/library/routing" data-discover="true">Routing </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/library/navigating" data-discover="true">Navigating </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/start/library/url-values" data-discover="true">URL Values </a></div></div></details></div><div><details class="group relative flex flex-col" open=""><summary class="-mx-4 rounded-md px-4 py-3 transition-colors duration-100 _no-triangle block cursor-pointer select-none outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-brand dark:focus-visible:ring-gray-100 hover:bg-gray-50 active:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800 dark:active:bg-gray-700"><div class="flex h-5 w-full items-center justify-between font-bold">Upgrading<svg aria-hidden="true" class="hidden h-5 w-5 group-open:block"><use href="/assets/icons-DB3ijYGZ.svg#chevron-d"></use></svg><svg aria-hidden="true" class="h-5 w-5 group-open:hidden"><use href="/assets/icons-DB3ijYGZ.svg#chevron-r"></use></svg></div></summary><div class="mb-2"><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/upgrading/v6" data-discover="true">Upgrading from v6 </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/upgrading/remix" data-discover="true">Upgrading from Remix </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/upgrading/component-routes" data-discover="true">Framework Adoption from Component Routes </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/upgrading/router-provider" data-discover="true">Framework Adoption from RouterProvider </a></div></details></div><div><details class="group relative flex flex-col" open=""><summary class="-mx-4 rounded-md px-4 py-3 transition-colors duration-100 _no-triangle block cursor-pointer select-none outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-brand dark:focus-visible:ring-gray-100 hover:bg-gray-50 active:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800 dark:active:bg-gray-700"><div class="flex h-5 w-full items-center justify-between font-bold">Tutorials<svg aria-hidden="true" class="hidden h-5 w-5 group-open:block"><use href="/assets/icons-DB3ijYGZ.svg#chevron-d"></use></svg><svg aria-hidden="true" class="h-5 w-5 group-open:hidden"><use href="/assets/icons-DB3ijYGZ.svg#chevron-r"></use></svg></div></summary><div class="mb-2"><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/tutorials/address-book" data-discover="true">Address Book </a></div></details></div><div><details class="group relative flex flex-col" open=""><summary class="-mx-4 rounded-md px-4 py-3 transition-colors duration-100 _no-triangle block cursor-pointer select-none outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-brand dark:focus-visible:ring-gray-100 hover:bg-gray-50 active:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800 dark:active:bg-gray-700"><div class="flex h-5 w-full items-center justify-between font-bold">How-Tos<svg aria-hidden="true" class="hidden h-5 w-5 group-open:block"><use href="/assets/icons-DB3ijYGZ.svg#chevron-d"></use></svg><svg aria-hidden="true" class="h-5 w-5 group-open:hidden"><use href="/assets/icons-DB3ijYGZ.svg#chevron-r"></use></svg></div></summary><div class="mb-2"><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/client-data" data-discover="true">Client Data </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/error-boundary" data-discover="true">Error Boundaries </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/error-reporting" data-discover="true">Error Reporting </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/fetchers" data-discover="true">Using Fetchers </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/file-route-conventions" data-discover="true">File Route Conventions </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/file-uploads" data-discover="true">File Uploads </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/form-validation" data-discover="true">Form Validation </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/headers" data-discover="true">HTTP Headers </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/pre-rendering" data-discover="true">Pre-Rendering </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/resource-routes" data-discover="true">Resource Routes </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/route-module-type-safety" data-discover="true">Route Module Type Safety </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/spa" data-discover="true">Single Page App (SPA) </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/status" data-discover="true">Status Codes </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/suspense" data-discover="true">Streaming with Suspense </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/how-to/view-transitions" data-discover="true">View Transitions </a></div></details></div><div><details class="group relative flex flex-col" open=""><summary class="-mx-4 rounded-md px-4 py-3 transition-colors duration-100 _no-triangle block cursor-pointer select-none outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-brand dark:focus-visible:ring-gray-100 hover:bg-gray-50 active:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800 dark:active:bg-gray-700"><div class="flex h-5 w-full items-center justify-between font-bold">Explanations<svg aria-hidden="true" class="hidden h-5 w-5 group-open:block"><use href="/assets/icons-DB3ijYGZ.svg#chevron-d"></use></svg><svg aria-hidden="true" class="h-5 w-5 group-open:hidden"><use href="/assets/icons-DB3ijYGZ.svg#chevron-r"></use></svg></div></summary><div class="mb-2"><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/explanation/code-splitting" data-discover="true">Automatic Code Splitting </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/explanation/hot-module-replacement" data-discover="true">Hot Module Replacement </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/explanation/progressive-enhancement" data-discover="true">Progressive Enhancement </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/explanation/race-conditions" data-discover="true">Race Conditions </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/explanation/sessions-and-cookies" data-discover="true">Sessions and Cookies </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/explanation/special-files" data-discover="true">Special Files </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/explanation/state-management" data-discover="true">State Management </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/explanation/type-safety" data-discover="true">Type Safety </a></div></details></div><div><details class="group relative flex flex-col" open=""><summary class="-mx-4 rounded-md px-4 py-3 transition-colors duration-100 _no-triangle block cursor-pointer select-none outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-brand dark:focus-visible:ring-gray-100 hover:bg-gray-50 active:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800 dark:active:bg-gray-700"><div class="flex h-5 w-full items-center justify-between font-bold">Community<svg aria-hidden="true" class="hidden h-5 w-5 group-open:block"><use href="/assets/icons-DB3ijYGZ.svg#chevron-d"></use></svg><svg aria-hidden="true" class="h-5 w-5 group-open:hidden"><use href="/assets/icons-DB3ijYGZ.svg#chevron-r"></use></svg></div></summary><div class="mb-2"><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/community/api-development-strategy" data-discover="true">API Development Strategy </a><a class="relative -mx-2 flex items-center justify-between rounded-md px-4 py-1.5 lg:text-sm text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand" href="/community/contributing" data-discover="true">Contributing </a></div></details></div></nav></div></div><div class="[&_*:focus]:scroll-mt-[8rem] lg:[&_*:focus]:scroll-mt-[5rem] min-h-[80vh] lg:ml-3 lg:w-[calc(100%-var(--nav-width))] flex flex-col lg:pl-6 xl:pl-10 2xl:pl-12"><div class="xl:flex xl:w-full xl:justify-between xl:gap-8"><div class="hidden xl:order-1 xl:block xl:w-56 xl:flex-shrink-0"></div><div class="min-w-0 px-4 pt-8 xl:mr-4 xl:flex-grow xl:pl-0"><div class="markdown w-full max-w-3xl pb-[33vh]"><div class="md-prose"><h1 id="react-router-home"><a aria-hidden="true" tabindex="-1" href="#react-router-home"><span class="icon icon-link"></span></a>React Router Home</h1> <p>React Router is a multi-strategy router for React bridging the gap from React 18 to React 19. You can use it maximally as a React framework or minimally as a library with your own architecture.</p> <ul> <li><a href="./start/framework/installation">Getting Started - Framework</a></li> <li><a href="./start/library/installation">Getting Started - Library</a></li> </ul> <p>If you are caught up on future flags, upgrading from React Router v6 or Remix is generally non-breaking:</p> <ul> <li><a href="./upgrading/v6">Upgrade from v6</a></li> <li><a href="./upgrading/remix">Upgrade from Remix</a></li> </ul> <h2 id="react-router-as-a-library"><a aria-hidden="true" tabindex="-1" href="#react-router-as-a-library"><span class="icon icon-link"></span></a>React Router as a Library</h2> <p>Like previous versions, React Router can still be used as a simple, declarative routing library. Its only job will be matching the URL to a set of components, providing access to URL data, and navigating around the app.</p> <p>This strategy is popular for "Single Page Apps" that have their own frontend infrastructure and v6 apps looking for a stress free upgrade.</p> <p>It's particularly good at offline + sync architectures where pending states are rare and users have long running sessions. Framework features like pending states, code splitting, server rendering, SEO, and initial page load times can be traded out for instant local-first interactions.</p> <div data-code-block="" data-line-numbers="true" data-lang="tsx"><pre data-line-numbers="true" data-lang="tsx" style="color: var(--base05);"><code><span class="codeblock-line" data-line-number="1"><span style="color: var(--base08)">ReactDOM</span>.<span style="color: var(--base0D)">createRoot</span>(<span style="color: var(--base08)">root</span>).<span style="color: var(--base0D)">render</span>( </span><span class="codeblock-line" data-line-number="2"> <<span style="color: var(--base0A)">BrowserRouter</span>> </span><span class="codeblock-line" data-line-number="3"> <<span style="color: var(--base0A)">Routes</span>> </span><span class="codeblock-line" data-line-number="4"> <<span style="color: var(--base0A)">Route</span> <span style="color: var(--base0D)">path</span><span style="color: var(--base0E)">=</span>"<span style="color: var(--base0B)">/</span>" <span style="color: var(--base0D)">element</span><span style="color: var(--base0E)">=</span><span style="color: var(--base0F)">{</span><<span style="color: var(--base0A)">Home</span> /><span style="color: var(--base0F)">}</span> /> </span><span class="codeblock-line" data-line-number="5"> <<span style="color: var(--base0A)">Route</span> <span style="color: var(--base0D)">path</span><span style="color: var(--base0E)">=</span>"<span style="color: var(--base0B)">dashboard</span>" <span style="color: var(--base0D)">element</span><span style="color: var(--base0E)">=</span><span style="color: var(--base0F)">{</span><<span style="color: var(--base0A)">Dashboard</span> /><span style="color: var(--base0F)">}</span>> </span><span class="codeblock-line" data-line-number="6"> <<span style="color: var(--base0A)">Route</span> <span style="color: var(--base0D)">index</span> <span style="color: var(--base0D)">element</span><span style="color: var(--base0E)">=</span><span style="color: var(--base0F)">{</span><<span style="color: var(--base0A)">RecentActivity</span> /><span style="color: var(--base0F)">}</span> /> </span><span class="codeblock-line" data-line-number="7"> <<span style="color: var(--base0A)">Route</span> <span style="color: var(--base0D)">path</span><span style="color: var(--base0E)">=</span>"<span style="color: var(--base0B)">project/:id</span>" <span style="color: var(--base0D)">element</span><span style="color: var(--base0E)">=</span><span style="color: var(--base0F)">{</span><<span style="color: var(--base0A)">Project</span> /><span style="color: var(--base0F)">}</span> /> </span><span class="codeblock-line" data-line-number="8"> </<span style="color: var(--base0A)">Route</span>> </span><span class="codeblock-line" data-line-number="9"> </<span style="color: var(--base0A)">Routes</span>> </span><span class="codeblock-line" data-line-number="10"> </<span style="color: var(--base0A)">BrowserRouter</span>> </span><span class="codeblock-line" data-line-number="11">); </span></code></pre></div> <p><a href="./start/library/installation">Get Started</a> with React Router as a library.</p> <h2 id="react-router-as-a-framework"><a aria-hidden="true" tabindex="-1" href="#react-router-as-a-framework"><span class="icon icon-link"></span></a>React Router as a framework</h2> <p>React Router can be used maximally as your React framework. In this setup, you'll use the React Router CLI and Vite bundler plugin for a full-stack development and deployment architecture. This enables React Router to provide a large set of features most web projects will want, including:</p> <ul> <li>Vite bundler and dev server integration</li> <li>hot module replacement</li> <li>code splitting</li> <li>route conventions with type safety</li> <li>file system or config-based routing</li> <li>data loading with type safety</li> <li>actions with type safety</li> <li>automatic revalidation of page data after actions</li> <li>SSR, SPA, and static rendering strategies</li> <li>APIs for pending states and optimistic UI</li> <li>deployment adapters</li> </ul> <p>Routes are configured with <code>routes.ts</code> which enables React Router to do a lot for you. For example, it will automatically code-split each route, provide type safety for the parameters and data, and automatically load the data with access to pending states as the user navigates to it.</p> <div data-code-block="" data-line-numbers="true" data-lang="typescript"><pre data-line-numbers="true" data-lang="typescript" style="color: var(--base05);"><code><span class="codeblock-line" data-line-number="1"><span style="color: var(--base0E)">import</span> { </span><span class="codeblock-line" data-line-number="2"> <span style="color: var(--base0E)">type</span> <span style="color: var(--base08)">RouteConfig</span>, </span><span class="codeblock-line" data-line-number="3"> <span style="color: var(--base08)">route</span>, </span><span class="codeblock-line" data-line-number="4"> <span style="color: var(--base08)">index</span>, </span><span class="codeblock-line" data-line-number="5"> <span style="color: var(--base08)">layout</span>, </span><span class="codeblock-line" data-line-number="6"> <span style="color: var(--base08)">prefix</span>, </span><span class="codeblock-line" data-line-number="7">} <span style="color: var(--base0E)">from</span> "<span style="color: var(--base0B)">@react-router/dev/routes</span>"; </span><span class="codeblock-line" data-line-number="8"> </span><span class="codeblock-line" data-line-number="9"><span style="color: var(--base0E)">export</span> <span style="color: var(--base0E)">default</span> [ </span><span class="codeblock-line" data-line-number="10"> <span style="color: var(--base0D)">index</span>("<span style="color: var(--base0B)">./home.tsx</span>"), </span><span class="codeblock-line" data-line-number="11"> <span style="color: var(--base0D)">route</span>("<span style="color: var(--base0B)">about</span>", "<span style="color: var(--base0B)">./about.tsx</span>"), </span><span class="codeblock-line" data-line-number="12"> </span><span class="codeblock-line" data-line-number="13"> <span style="color: var(--base0D)">layout</span>("<span style="color: var(--base0B)">./auth/layout.tsx</span>", [ </span><span class="codeblock-line" data-line-number="14"> <span style="color: var(--base0D)">route</span>("<span style="color: var(--base0B)">login</span>", "<span style="color: var(--base0B)">./auth/login.tsx</span>"), </span><span class="codeblock-line" data-line-number="15"> <span style="color: var(--base0D)">route</span>("<span style="color: var(--base0B)">register</span>", "<span style="color: var(--base0B)">./auth/register.tsx</span>"), </span><span class="codeblock-line" data-line-number="16"> ]), </span><span class="codeblock-line" data-line-number="17"> </span><span class="codeblock-line" data-line-number="18"> <span style="color: var(--base0E)">...</span><span style="color: var(--base0D)">prefix</span>("<span style="color: var(--base0B)">concerts</span>", [ </span><span class="codeblock-line" data-line-number="19"> <span style="color: var(--base0D)">index</span>("<span style="color: var(--base0B)">./concerts/home.tsx</span>"), </span><span class="codeblock-line" data-line-number="20"> <span style="color: var(--base0D)">route</span>("<span style="color: var(--base0B)">:city</span>", "<span style="color: var(--base0B)">./concerts/city.tsx</span>"), </span><span class="codeblock-line" data-line-number="21"> <span style="color: var(--base0D)">route</span>("<span style="color: var(--base0B)">:city/:id</span>", "<span style="color: var(--base0B)">./concerts/show.tsx</span>"), </span><span class="codeblock-line" data-line-number="22"> <span style="color: var(--base0D)">route</span>("<span style="color: var(--base0B)">trending</span>", "<span style="color: var(--base0B)">./concerts/trending.tsx</span>"), </span><span class="codeblock-line" data-line-number="23"> ]), </span><span class="codeblock-line" data-line-number="24">] <span style="color: var(--base0E)">satisfies</span> <span style="color: var(--base0A)">RouteConfig</span>; </span></code></pre></div> <p>You'll have access to the Route Module API, which most of the other features are built on.</p> <p>Loaders provide data to route components:</p> <div data-code-block="" data-line-numbers="true" data-lang="tsx"><pre data-line-numbers="true" data-lang="tsx" style="color: var(--base05);"><code><span class="codeblock-line" data-line-number="1"><span style="color: var(--base03)">// loaders provide data to components</span> </span><span class="codeblock-line" data-line-number="2"><span style="color: var(--base0E)">export</span> <span style="color: var(--base0E)">async</span> <span style="color: var(--base0D)">function</span> <span style="color: var(--base0D)">loader</span>({ <span style="color: var(--base08)">params</span> }<span style="color: var(--base0E)">:</span> <span style="color: var(--base0A)">Route</span>.<span style="color: var(--base0A)">LoaderArgs</span>) { </span><span class="codeblock-line" data-line-number="3"> <span style="color: var(--base0A)">const</span> [<span style="color: var(--base08)">show</span>, <span style="color: var(--base08)">isLiked</span>] <span style="color: var(--base0E)">=</span> <span style="color: var(--base0E)">await</span> <span style="color: var(--base0A)">Promise</span>.<span style="color: var(--base0D)">all</span>([ </span><span class="codeblock-line" data-line-number="4"> <span style="color: var(--base08)">fakeDb</span>.<span style="color: var(--base0D)">find</span>("<span style="color: var(--base0B)">show</span>", <span style="color: var(--base08)">params</span>.<span style="color: var(--base08)">id</span>), </span><span class="codeblock-line" data-line-number="5"> <span style="color: var(--base0D)">fakeIsLiked</span>(<span style="color: var(--base08)">params</span>.<span style="color: var(--base08)">city</span>), </span><span class="codeblock-line" data-line-number="6"> ]); </span><span class="codeblock-line" data-line-number="7"> <span style="color: var(--base0E)">return</span> { <span style="color: var(--base08)">show</span>, <span style="color: var(--base08)">isLiked</span> }; </span><span class="codeblock-line" data-line-number="8">} </span></code></pre></div> <p>Components render at their configured URLs from routes.ts with the loader data passed in as a prop:</p> <div data-code-block="" data-line-numbers="true" data-lang="tsx"><pre data-line-numbers="true" data-lang="tsx" style="color: var(--base05);"><code><span class="codeblock-line" data-line-number="1"><span style="color: var(--base0E)">export</span> <span style="color: var(--base0E)">default</span> <span style="color: var(--base0D)">function</span> <span style="color: var(--base0D)">Show</span>({ </span><span class="codeblock-line" data-line-number="2"> <span style="color: var(--base08)">loaderData</span>, </span><span class="codeblock-line" data-line-number="3">}<span style="color: var(--base0E)">:</span> <span style="color: var(--base0A)">Route</span>.<span style="color: var(--base0A)">ComponentProps</span>) { </span><span class="codeblock-line" data-line-number="4"> <span style="color: var(--base0A)">const</span> { <span style="color: var(--base08)">show</span>, <span style="color: var(--base08)">isLiked</span> } <span style="color: var(--base0E)">=</span> <span style="color: var(--base08)">loaderData</span>; </span><span class="codeblock-line" data-line-number="5"> <span style="color: var(--base0E)">return</span> ( </span><span class="codeblock-line" data-line-number="6"> <<span style="color: var(--base08)">div</span>> </span><span class="codeblock-line" data-line-number="7"> <<span style="color: var(--base08)">h1</span>><span style="color: var(--base0F)">{</span><span style="color: var(--base08)">show</span>.<span style="color: var(--base08)">name</span><span style="color: var(--base0F)">}</span></<span style="color: var(--base08)">h1</span>> </span><span class="codeblock-line" data-line-number="8"> <<span style="color: var(--base08)">p</span>><span style="color: var(--base0F)">{</span><span style="color: var(--base08)">show</span>.<span style="color: var(--base08)">description</span><span style="color: var(--base0F)">}</span></<span style="color: var(--base08)">p</span>> </span><span class="codeblock-line" data-line-number="9"> </span><span class="codeblock-line" data-line-number="10"> <<span style="color: var(--base08)">form</span> <span style="color: var(--base0D)">method</span><span style="color: var(--base0E)">=</span>"<span style="color: var(--base0B)">post</span>"> </span><span class="codeblock-line" data-line-number="11"> <<span style="color: var(--base08)">button</span> </span><span class="codeblock-line" data-line-number="12"> <span style="color: var(--base0D)">type</span><span style="color: var(--base0E)">=</span>"<span style="color: var(--base0B)">submit</span>" </span><span class="codeblock-line" data-line-number="13"> <span style="color: var(--base0D)">name</span><span style="color: var(--base0E)">=</span>"<span style="color: var(--base0B)">liked</span>" </span><span class="codeblock-line" data-line-number="14"> <span style="color: var(--base0D)">value</span><span style="color: var(--base0E)">=</span><span style="color: var(--base0F)">{</span><span style="color: var(--base08)">isLiked</span> <span style="color: var(--base0E)">?</span> <span style="color: var(--base09)">0</span> <span style="color: var(--base0E)">:</span> <span style="color: var(--base09)">1</span><span style="color: var(--base0F)">}</span> </span><span class="codeblock-line" data-line-number="15"> > </span><span class="codeblock-line" data-line-number="16"> <span style="color: var(--base0F)">{</span><span style="color: var(--base08)">isLiked</span> <span style="color: var(--base0E)">?</span> "<span style="color: var(--base0B)">Remove</span>" <span style="color: var(--base0E)">:</span> "<span style="color: var(--base0B)">Save</span>"<span style="color: var(--base0F)">}</span> </span><span class="codeblock-line" data-line-number="17"> </<span style="color: var(--base08)">button</span>> </span><span class="codeblock-line" data-line-number="18"> </<span style="color: var(--base08)">form</span>> </span><span class="codeblock-line" data-line-number="19"> </<span style="color: var(--base08)">div</span>> </span><span class="codeblock-line" data-line-number="20"> ); </span><span class="codeblock-line" data-line-number="21">} </span></code></pre></div> <p>Actions can update data and trigger a revalidation of all data on the page so your UI stays up to date automatically:</p> <div data-code-block="" data-line-numbers="true" data-lang="tsx"><pre data-line-numbers="true" data-lang="tsx" style="color: var(--base05);"><code><span class="codeblock-line" data-line-number="1"><span style="color: var(--base0E)">export</span> <span style="color: var(--base0E)">async</span> <span style="color: var(--base0D)">function</span> <span style="color: var(--base0D)">action</span>({ </span><span class="codeblock-line" data-line-number="2"> <span style="color: var(--base08)">request</span>, </span><span class="codeblock-line" data-line-number="3"> <span style="color: var(--base08)">params</span>, </span><span class="codeblock-line" data-line-number="4">}<span style="color: var(--base0E)">:</span> <span style="color: var(--base0A)">Route</span>.<span style="color: var(--base0A)">LoaderArgs</span>) { </span><span class="codeblock-line" data-line-number="5"> <span style="color: var(--base0A)">const</span> <span style="color: var(--base08)">formData</span> <span style="color: var(--base0E)">=</span> <span style="color: var(--base0E)">await</span> <span style="color: var(--base08)">request</span>.<span style="color: var(--base0D)">formData</span>(); </span><span class="codeblock-line" data-line-number="6"> <span style="color: var(--base0E)">await</span> <span style="color: var(--base0D)">fakeSetLikedShow</span>(<span style="color: var(--base08)">formData</span>.<span style="color: var(--base0D)">get</span>("<span style="color: var(--base0B)">liked</span>")); </span><span class="codeblock-line" data-line-number="7"> <span style="color: var(--base0E)">return</span> { ok: <span style="color: var(--base09)">true</span> }; </span><span class="codeblock-line" data-line-number="8">} </span></code></pre></div> <p>Route modules also provide conventions for SEO, asset loading, error boundaries, and more.</p> <p><a href="./start/framework/installation">Get Started</a> with React Router as a framework.</p></div></div></div></div><div class="mt-auto px-4 pt-8 lg:pr-8 xl:pl-0"><div class="flex justify-between gap-4 border-t border-t-gray-50 py-4 text-sm text-gray-400 dark:border-gray-800"><div class="lg:flex lg:items-center"><div class="pr-4 lg:pl-4"><a class="hover:underline" href="/brand" data-discover="true">Brand Assets</a></div><div class="hidden lg:block">•</div><div class="pr-4 lg:pl-4">Docs and examples <a class="hover:underline" href="https://creativecommons.org/licenses/by/4.0/">CC 4.0</a></div></div><div><a class="flex items-center gap-1 hover:underline" href="https://github.com/remix-run/react-router/edit/main/docs/index.md">Edit<svg aria-hidden="true" class="h-4 w-4"><use href="/assets/icons-DB3ijYGZ.svg#edit"></use></svg></a></div></div></div></div></div></div><script>((storageKey2, restoreKey) => { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, ""); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || "{}"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === "number") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })("react-router-scroll-positions", null)</script><script>window.__reactRouterContext = {"basename":"/","future":{"unstable_optimizeDeps":true},"isSpaMode":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());</script><script type="module" async="">; import * as route0 from "/assets/root-BBRtNIMS.js"; import * as route1 from "/assets/docs-layout-xSj_tQL2.js"; import * as route2 from "/assets/doc-DYb-wxfv.js"; window.__reactRouterManifest = { "entry": { "module": "/assets/entry.client-CrjhHbtS.js", "imports": [ "/assets/chunk-W3FMU5Y5-BUr5hIcl.js", "/assets/index-ohd1lys1.js" ], "css": [] }, "routes": { "root": { "id": "root", "path": "", "hasAction": false, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasErrorBoundary": true, "module": "/assets/root-BBRtNIMS.js", "imports": [ "/assets/chunk-W3FMU5Y5-BUr5hIcl.js", "/assets/index-ohd1lys1.js", "/assets/with-props-Djj6MXuF.js", "/assets/docsearch-BJULtLot.js", "/assets/icons-CeDkFKCJ.js" ], "css": [ "/assets/root-CD4lcuPl.css" ] }, "docs": { "id": "docs", "parentId": "root", "path": "", "hasAction": false, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasErrorBoundary": false, "module": "/assets/docs-layout-xSj_tQL2.js", "imports": [ "/assets/with-props-Djj6MXuF.js", "/assets/chunk-W3FMU5Y5-BUr5hIcl.js", "/assets/index-BEXtJonk.js", "/assets/icons-CeDkFKCJ.js", "/assets/docsearch-BJULtLot.js", "/assets/index-ohd1lys1.js" ], "css": [] }, "pages/doc": { "id": "pages/doc", "parentId": "docs", "path": "*", "hasAction": false, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasErrorBoundary": true, "module": "/assets/doc-DYb-wxfv.js", "imports": [ "/assets/with-props-Djj6MXuF.js", "/assets/chunk-W3FMU5Y5-BUr5hIcl.js", "/assets/meta-_5CFb1fg.js", "/assets/icons-CeDkFKCJ.js", "/assets/index-BEXtJonk.js" ], "css": [] }, "pages/splash": { "id": "pages/splash", "parentId": "root", "index": true, "hasAction": false, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasErrorBoundary": false, "module": "/assets/splash-Cd98Tv7t.js", "imports": [ "/assets/with-props-Djj6MXuF.js", "/assets/chunk-W3FMU5Y5-BUr5hIcl.js", "/assets/icons-CeDkFKCJ.js" ], "css": [] }, "docs-index": { "id": "docs-index", "parentId": "root", "path": "/:ref", "hasAction": false, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasErrorBoundary": false, "module": "/assets/docs-index-l0sNRNKZ.js", "imports": [], "css": [] } }, "url": "/assets/manifest-597cb61f.js", "version": "597cb61f" }; window.__reactRouterRouteModules = {"root":route0,"docs":route1,"pages/doc":route2}; import("/assets/entry.client-CrjhHbtS.js");</script><script>window.__reactRouterContext.streamController.enqueue("[{\"_1\":2,\"_380\":-5,\"_381\":-5},\"loaderData\",{\"_3\":4,\"_9\":10,\"_359\":360},\"root\",{\"_5\":6,\"_7\":8},\"colorScheme\",\"system\",\"isProductionHost\",true,\"docs\",{\"_11\":12,\"_338\":339},\"menu\",[13,128,158,170,266,320],{\"_14\":15,\"_20\":21,\"_22\":23,\"_24\":25,\"_26\":27},\"attrs\",{\"_16\":17,\"_18\":19},\"title\",\"Getting Started\",\"order\",1,\"filename\",\"docs/start/index.md\",\"slug\",\"start\",\"hasContent\",false,\"children\",[28,101],{\"_14\":29,\"_20\":31,\"_22\":32,\"_24\":25,\"_26\":33},{\"_16\":30,\"_18\":19},\"Framework\",\"docs/start/framework/index.md\",\"start/framework\",[34,40,47,54,61,68,75,81,88,95],{\"_14\":35,\"_20\":37,\"_22\":38,\"_24\":8,\"_26\":39},{\"_16\":36,\"_18\":19},\"Installation\",\"docs/start/framework/installation.md\",\"start/framework/installation\",[],{\"_14\":41,\"_20\":44,\"_22\":45,\"_24\":8,\"_26\":46},{\"_16\":42,\"_18\":43},\"Routing\",2,\"docs/start/framework/routing.md\",\"start/framework/routing\",[],{\"_14\":48,\"_20\":51,\"_22\":52,\"_24\":8,\"_26\":53},{\"_16\":49,\"_18\":50},\"Route Module\",3,\"docs/start/framework/route-module.md\",\"start/framework/route-module\",[],{\"_14\":55,\"_20\":58,\"_22\":59,\"_24\":8,\"_26\":60},{\"_16\":56,\"_18\":57},\"Rendering Strategies\",4,\"docs/start/framework/rendering.md\",\"start/framework/rendering\",[],{\"_14\":62,\"_20\":65,\"_22\":66,\"_24\":8,\"_26\":67},{\"_16\":63,\"_18\":64},\"Data Loading\",5,\"docs/start/framework/data-loading.md\",\"start/framework/data-loading\",[],{\"_14\":69,\"_20\":72,\"_22\":73,\"_24\":8,\"_26\":74},{\"_16\":70,\"_18\":71},\"Actions\",6,\"docs/start/framework/actions.md\",\"start/framework/actions\",[],{\"_14\":76,\"_20\":78,\"_22\":79,\"_24\":8,\"_26\":80},{\"_16\":77,\"_18\":71},\"Navigating\",\"docs/start/framework/navigating.md\",\"start/framework/navigating\",[],{\"_14\":82,\"_20\":85,\"_22\":86,\"_24\":8,\"_26\":87},{\"_16\":83,\"_18\":84},\"Pending UI\",7,\"docs/start/framework/pending-ui.md\",\"start/framework/pending-ui\",[],{\"_14\":89,\"_20\":92,\"_22\":93,\"_24\":8,\"_26\":94},{\"_16\":90,\"_18\":91},\"Testing\",9,\"docs/start/framework/testing.md\",\"start/framework/testing\",[],{\"_14\":96,\"_20\":98,\"_22\":99,\"_24\":8,\"_26\":100},{\"_16\":97},\"Custom Framework\",\"docs/start/framework/custom.md\",\"start/framework/custom\",[],{\"_14\":102,\"_20\":104,\"_22\":105,\"_24\":25,\"_26\":106},{\"_16\":103,\"_18\":43},\"Library\",\"docs/start/library/index.md\",\"start/library\",[107,112,117,122],{\"_14\":108,\"_20\":109,\"_22\":110,\"_24\":8,\"_26\":111},{\"_16\":36,\"_18\":19},\"docs/start/library/installation.md\",\"start/library/installation\",[],{\"_14\":113,\"_20\":114,\"_22\":115,\"_24\":8,\"_26\":116},{\"_16\":42,\"_18\":43},\"docs/start/library/routing.md\",\"start/library/routing\",[],{\"_14\":118,\"_20\":119,\"_22\":120,\"_24\":8,\"_26\":121},{\"_16\":77,\"_18\":50},\"docs/start/library/navigating.md\",\"start/library/navigating\",[],{\"_14\":123,\"_20\":125,\"_22\":126,\"_24\":8,\"_26\":127},{\"_16\":124},\"URL Values\",\"docs/start/library/url-values.md\",\"start/library/url-values\",[],{\"_14\":129,\"_20\":131,\"_22\":132,\"_24\":25,\"_26\":133},{\"_16\":130,\"_18\":43},\"Upgrading\",\"docs/upgrading/index.md\",\"upgrading\",[134,140,146,152],{\"_14\":135,\"_20\":137,\"_22\":138,\"_24\":8,\"_26\":139},{\"_16\":136,\"_18\":19},\"Upgrading from v6\",\"docs/upgrading/v6.md\",\"upgrading/v6\",[],{\"_14\":141,\"_20\":143,\"_22\":144,\"_24\":8,\"_26\":145},{\"_16\":142,\"_18\":43},\"Upgrading from Remix\",\"docs/upgrading/remix.md\",\"upgrading/remix\",[],{\"_14\":147,\"_20\":149,\"_22\":150,\"_24\":8,\"_26\":151},{\"_16\":148},\"Framework Adoption from Component Routes\",\"docs/upgrading/component-routes.md\",\"upgrading/component-routes\",[],{\"_14\":153,\"_20\":155,\"_22\":156,\"_24\":8,\"_26\":157},{\"_16\":154},\"Framework Adoption from RouterProvider\",\"docs/upgrading/router-provider.md\",\"upgrading/router-provider\",[],{\"_14\":159,\"_20\":161,\"_22\":162,\"_24\":25,\"_26\":163},{\"_16\":160,\"_18\":50},\"Tutorials\",\"docs/tutorials/index.md\",\"tutorials\",[164],{\"_14\":165,\"_20\":167,\"_22\":168,\"_24\":8,\"_26\":169},{\"_16\":166,\"_18\":19},\"Address Book\",\"docs/tutorials/address-book.md\",\"tutorials/address-book\",[],{\"_14\":171,\"_20\":173,\"_22\":174,\"_24\":25,\"_26\":175},{\"_16\":172,\"_18\":57},\"How-Tos\",\"docs/how-to/index.md\",\"how-to\",[176,182,188,194,200,206,212,218,224,230,236,242,248,254,260],{\"_14\":177,\"_20\":179,\"_22\":180,\"_24\":8,\"_26\":181},{\"_16\":178},\"Client Data\",\"docs/how-to/client-data.md\",\"how-to/client-data\",[],{\"_14\":183,\"_20\":185,\"_22\":186,\"_24\":8,\"_26\":187},{\"_16\":184},\"Error Boundaries\",\"docs/how-to/error-boundary.md\",\"how-to/error-boundary\",[],{\"_14\":189,\"_20\":191,\"_22\":192,\"_24\":8,\"_26\":193},{\"_16\":190},\"Error Reporting\",\"docs/how-to/error-reporting.md\",\"how-to/error-reporting\",[],{\"_14\":195,\"_20\":197,\"_22\":198,\"_24\":8,\"_26\":199},{\"_16\":196},\"Using Fetchers\",\"docs/how-to/fetchers.md\",\"how-to/fetchers\",[],{\"_14\":201,\"_20\":203,\"_22\":204,\"_24\":8,\"_26\":205},{\"_16\":202},\"File Route Conventions\",\"docs/how-to/file-route-conventions.md\",\"how-to/file-route-conventions\",[],{\"_14\":207,\"_20\":209,\"_22\":210,\"_24\":8,\"_26\":211},{\"_16\":208},\"File Uploads\",\"docs/how-to/file-uploads.md\",\"how-to/file-uploads\",[],{\"_14\":213,\"_20\":215,\"_22\":216,\"_24\":8,\"_26\":217},{\"_16\":214},\"Form Validation\",\"docs/how-to/form-validation.md\",\"how-to/form-validation\",[],{\"_14\":219,\"_20\":221,\"_22\":222,\"_24\":8,\"_26\":223},{\"_16\":220},\"HTTP Headers\",\"docs/how-to/headers.md\",\"how-to/headers\",[],{\"_14\":225,\"_20\":227,\"_22\":228,\"_24\":8,\"_26\":229},{\"_16\":226},\"Pre-Rendering\",\"docs/how-to/pre-rendering.md\",\"how-to/pre-rendering\",[],{\"_14\":231,\"_20\":233,\"_22\":234,\"_24\":8,\"_26\":235},{\"_16\":232},\"Resource Routes\",\"docs/how-to/resource-routes.md\",\"how-to/resource-routes\",[],{\"_14\":237,\"_20\":239,\"_22\":240,\"_24\":8,\"_26\":241},{\"_16\":238},\"Route Module Type Safety\",\"docs/how-to/route-module-type-safety.md\",\"how-to/route-module-type-safety\",[],{\"_14\":243,\"_20\":245,\"_22\":246,\"_24\":8,\"_26\":247},{\"_16\":244},\"Single Page App (SPA)\",\"docs/how-to/spa.md\",\"how-to/spa\",[],{\"_14\":249,\"_20\":251,\"_22\":252,\"_24\":8,\"_26\":253},{\"_16\":250},\"Status Codes\",\"docs/how-to/status.md\",\"how-to/status\",[],{\"_14\":255,\"_20\":257,\"_22\":258,\"_24\":8,\"_26\":259},{\"_16\":256},\"Streaming with Suspense\",\"docs/how-to/suspense.md\",\"how-to/suspense\",[],{\"_14\":261,\"_20\":263,\"_22\":264,\"_24\":8,\"_26\":265},{\"_16\":262},\"View Transitions\",\"docs/how-to/view-transitions.md\",\"how-to/view-transitions\",[],{\"_14\":267,\"_20\":269,\"_22\":270,\"_24\":25,\"_26\":271},{\"_16\":268,\"_18\":64},\"Explanations\",\"docs/explanation/index.md\",\"explanation\",[272,278,284,290,296,302,308,314],{\"_14\":273,\"_20\":275,\"_22\":276,\"_24\":8,\"_26\":277},{\"_16\":274},\"Automatic Code Splitting\",\"docs/explanation/code-splitting.md\",\"explanation/code-splitting\",[],{\"_14\":279,\"_20\":281,\"_22\":282,\"_24\":8,\"_26\":283},{\"_16\":280},\"Hot Module Replacement\",\"docs/explanation/hot-module-replacement.md\",\"explanation/hot-module-replacement\",[],{\"_14\":285,\"_20\":287,\"_22\":288,\"_24\":8,\"_26\":289},{\"_16\":286},\"Progressive Enhancement\",\"docs/explanation/progressive-enhancement.md\",\"explanation/progressive-enhancement\",[],{\"_14\":291,\"_20\":293,\"_22\":294,\"_24\":8,\"_26\":295},{\"_16\":292},\"Race Conditions\",\"docs/explanation/race-conditions.md\",\"explanation/race-conditions\",[],{\"_14\":297,\"_20\":299,\"_22\":300,\"_24\":8,\"_26\":301},{\"_16\":298},\"Sessions and Cookies\",\"docs/explanation/sessions-and-cookies.md\",\"explanation/sessions-and-cookies\",[],{\"_14\":303,\"_20\":305,\"_22\":306,\"_24\":8,\"_26\":307},{\"_16\":304},\"Special Files\",\"docs/explanation/special-files.md\",\"explanation/special-files\",[],{\"_14\":309,\"_20\":311,\"_22\":312,\"_24\":8,\"_26\":313},{\"_16\":310},\"State Management\",\"docs/explanation/state-management.md\",\"explanation/state-management\",[],{\"_14\":315,\"_20\":317,\"_22\":318,\"_24\":8,\"_26\":319},{\"_16\":316},\"Type Safety\",\"docs/explanation/type-safety.md\",\"explanation/type-safety\",[],{\"_14\":321,\"_20\":323,\"_22\":324,\"_24\":25,\"_26\":325},{\"_16\":322,\"_18\":71},\"Community\",\"docs/community/index.md\",\"community\",[326,332],{\"_14\":327,\"_20\":329,\"_22\":330,\"_24\":8,\"_26\":331},{\"_16\":328},\"API Development Strategy\",\"docs/community/api-development-strategy.md\",\"community/api-development-strategy\",[],{\"_14\":333,\"_20\":335,\"_22\":336,\"_24\":8,\"_26\":337},{\"_16\":334},\"Contributing\",\"docs/community/contributing.md\",\"community/contributing\",[],\"header\",{\"_340\":341,\"_344\":342,\"_345\":346,\"_347\":348,\"_350\":346,\"_351\":352,\"_353\":8,\"_354\":8,\"_355\":-7,\"_356\":346,\"_357\":358},\"versions\",[342,343],\"7.1.5\",\"6.29.0\",\"latestVersion\",\"releaseBranch\",\"main\",\"branches\",[346,349],\"dev\",\"currentGitHubRef\",\"lang\",\"en\",\"isLatest\",\"hasAPIDocs\",\"refParam\",\"ref\",\"apiDocsRef\",\"v7\",\"pages/doc\",{\"_361\":362},\"doc\",{\"_14\":363,\"_20\":365,\"_366\":367,\"_22\":368,\"_369\":370,\"_26\":379},{\"_16\":364,\"_18\":19},\"React Router Home\",\"docs/index.md\",\"html\",\"\u003ch1 id=\\\"react-router-home\\\"\u003e\u003ca aria-hidden=\\\"true\\\" tabindex=\\\"-1\\\" href=\\\"#react-router-home\\\"\u003e\u003cspan class=\\\"icon icon-link\\\"\u003e\u003c/span\u003e\u003c/a\u003eReact Router Home\u003c/h1\u003e\\n\u003cp\u003eReact Router is a multi-strategy router for React bridging the gap from React 18 to React 19. You can use it maximally as a React framework or minimally as a library with your own architecture.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003ca href=\\\"./start/framework/installation\\\"\u003eGetting Started - Framework\u003c/a\u003e\u003c/li\u003e\\n\u003cli\u003e\u003ca href=\\\"./start/library/installation\\\"\u003eGetting Started - Library\u003c/a\u003e\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003eIf you are caught up on future flags, upgrading from React Router v6 or Remix is generally non-breaking:\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003ca href=\\\"./upgrading/v6\\\"\u003eUpgrade from v6\u003c/a\u003e\u003c/li\u003e\\n\u003cli\u003e\u003ca href=\\\"./upgrading/remix\\\"\u003eUpgrade from Remix\u003c/a\u003e\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2 id=\\\"react-router-as-a-library\\\"\u003e\u003ca aria-hidden=\\\"true\\\" tabindex=\\\"-1\\\" href=\\\"#react-router-as-a-library\\\"\u003e\u003cspan class=\\\"icon icon-link\\\"\u003e\u003c/span\u003e\u003c/a\u003eReact Router as a Library\u003c/h2\u003e\\n\u003cp\u003eLike previous versions, React Router can still be used as a simple, declarative routing library. Its only job will be matching the URL to a set of components, providing access to URL data, and navigating around the app.\u003c/p\u003e\\n\u003cp\u003eThis strategy is popular for \\\"Single Page Apps\\\" that have their own frontend infrastructure and v6 apps looking for a stress free upgrade.\u003c/p\u003e\\n\u003cp\u003eIt's particularly good at offline + sync architectures where pending states are rare and users have long running sessions. Framework features like pending states, code splitting, server rendering, SEO, and initial page load times can be traded out for instant local-first interactions.\u003c/p\u003e\\n\u003cdiv data-code-block=\\\"\\\" data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\"\u003e\u003cpre data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\" style=\\\"color: var(--base05);\\\"\u003e\u003ccode\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"1\\\"\u003e\u003cspan style=\\\"color: var(--base08)\\\"\u003eReactDOM\u003c/span\u003e.\u003cspan style=\\\"color: var(--base0D)\\\"\u003ecreateRoot\u003c/span\u003e(\u003cspan style=\\\"color: var(--base08)\\\"\u003eroot\u003c/span\u003e).\u003cspan style=\\\"color: var(--base0D)\\\"\u003erender\u003c/span\u003e(\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"2\\\"\u003e \u0026#x3C;\u003cspan style=\\\"color: var(--base0A)\\\"\u003eBrowserRouter\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"3\\\"\u003e \u0026#x3C;\u003cspan style=\\\"color: var(--base0A)\\\"\u003eRoutes\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"4\\\"\u003e \u0026#x3C;\u003cspan style=\\\"color: var(--base0A)\\\"\u003eRoute\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003epath\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003e/\u003c/span\u003e\\\" \u003cspan style=\\\"color: var(--base0D)\\\"\u003eelement\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u0026#x3C;\u003cspan style=\\\"color: var(--base0A)\\\"\u003eHome\u003c/span\u003e /\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e /\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"5\\\"\u003e \u0026#x3C;\u003cspan style=\\\"color: var(--base0A)\\\"\u003eRoute\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003epath\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003edashboard\u003c/span\u003e\\\" \u003cspan style=\\\"color: var(--base0D)\\\"\u003eelement\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u0026#x3C;\u003cspan style=\\\"color: var(--base0A)\\\"\u003eDashboard\u003c/span\u003e /\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"6\\\"\u003e \u0026#x3C;\u003cspan style=\\\"color: var(--base0A)\\\"\u003eRoute\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eindex\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eelement\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u0026#x3C;\u003cspan style=\\\"color: var(--base0A)\\\"\u003eRecentActivity\u003c/span\u003e /\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e /\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"7\\\"\u003e \u0026#x3C;\u003cspan style=\\\"color: var(--base0A)\\\"\u003eRoute\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003epath\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003eproject/:id\u003c/span\u003e\\\" \u003cspan style=\\\"color: var(--base0D)\\\"\u003eelement\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u0026#x3C;\u003cspan style=\\\"color: var(--base0A)\\\"\u003eProject\u003c/span\u003e /\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e /\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"8\\\"\u003e \u0026#x3C;/\u003cspan style=\\\"color: var(--base0A)\\\"\u003eRoute\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"9\\\"\u003e \u0026#x3C;/\u003cspan style=\\\"color: var(--base0A)\\\"\u003eRoutes\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"10\\\"\u003e \u0026#x3C;/\u003cspan style=\\\"color: var(--base0A)\\\"\u003eBrowserRouter\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"11\\\"\u003e);\\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\u003cp\u003e\u003ca href=\\\"./start/library/installation\\\"\u003eGet Started\u003c/a\u003e with React Router as a library.\u003c/p\u003e\\n\u003ch2 id=\\\"react-router-as-a-framework\\\"\u003e\u003ca aria-hidden=\\\"true\\\" tabindex=\\\"-1\\\" href=\\\"#react-router-as-a-framework\\\"\u003e\u003cspan class=\\\"icon icon-link\\\"\u003e\u003c/span\u003e\u003c/a\u003eReact Router as a framework\u003c/h2\u003e\\n\u003cp\u003eReact Router can be used maximally as your React framework. In this setup, you'll use the React Router CLI and Vite bundler plugin for a full-stack development and deployment architecture. This enables React Router to provide a large set of features most web projects will want, including:\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eVite bundler and dev server integration\u003c/li\u003e\\n\u003cli\u003ehot module replacement\u003c/li\u003e\\n\u003cli\u003ecode splitting\u003c/li\u003e\\n\u003cli\u003eroute conventions with type safety\u003c/li\u003e\\n\u003cli\u003efile system or config-based routing\u003c/li\u003e\\n\u003cli\u003edata loading with type safety\u003c/li\u003e\\n\u003cli\u003eactions with type safety\u003c/li\u003e\\n\u003cli\u003eautomatic revalidation of page data after actions\u003c/li\u003e\\n\u003cli\u003eSSR, SPA, and static rendering strategies\u003c/li\u003e\\n\u003cli\u003eAPIs for pending states and optimistic UI\u003c/li\u003e\\n\u003cli\u003edeployment adapters\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003eRoutes are configured with \u003ccode\u003eroutes.ts\u003c/code\u003e which enables React Router to do a lot for you. For example, it will automatically code-split each route, provide type safety for the parameters and data, and automatically load the data with access to pending states as the user navigates to it.\u003c/p\u003e\\n\u003cdiv data-code-block=\\\"\\\" data-line-numbers=\\\"true\\\" data-lang=\\\"typescript\\\"\u003e\u003cpre data-line-numbers=\\\"true\\\" data-lang=\\\"typescript\\\" style=\\\"color: var(--base05);\\\"\u003e\u003ccode\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"1\\\"\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003eimport\u003c/span\u003e {\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"2\\\"\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003etype\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003eRouteConfig\u003c/span\u003e,\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"3\\\"\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003eroute\u003c/span\u003e,\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"4\\\"\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003eindex\u003c/span\u003e,\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"5\\\"\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003elayout\u003c/span\u003e,\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"6\\\"\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003eprefix\u003c/span\u003e,\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"7\\\"\u003e} \u003cspan style=\\\"color: var(--base0E)\\\"\u003efrom\u003c/span\u003e \\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003e@react-router/dev/routes\u003c/span\u003e\\\";\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"8\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"9\\\"\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003eexport\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003edefault\u003c/span\u003e [\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"10\\\"\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eindex\u003c/span\u003e(\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003e./home.tsx\u003c/span\u003e\\\"),\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"11\\\"\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eroute\u003c/span\u003e(\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003eabout\u003c/span\u003e\\\", \\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003e./about.tsx\u003c/span\u003e\\\"),\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"12\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"13\\\"\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003elayout\u003c/span\u003e(\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003e./auth/layout.tsx\u003c/span\u003e\\\", [\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"14\\\"\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eroute\u003c/span\u003e(\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003elogin\u003c/span\u003e\\\", \\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003e./auth/login.tsx\u003c/span\u003e\\\"),\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"15\\\"\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eroute\u003c/span\u003e(\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003eregister\u003c/span\u003e\\\", \\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003e./auth/register.tsx\u003c/span\u003e\\\"),\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"16\\\"\u003e ]),\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"17\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"18\\\"\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e...\u003c/span\u003e\u003cspan style=\\\"color: var(--base0D)\\\"\u003eprefix\u003c/span\u003e(\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003econcerts\u003c/span\u003e\\\", [\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"19\\\"\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eindex\u003c/span\u003e(\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003e./concerts/home.tsx\u003c/span\u003e\\\"),\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"20\\\"\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eroute\u003c/span\u003e(\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003e:city\u003c/span\u003e\\\", \\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003e./concerts/city.tsx\u003c/span\u003e\\\"),\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"21\\\"\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eroute\u003c/span\u003e(\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003e:city/:id\u003c/span\u003e\\\", \\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003e./concerts/show.tsx\u003c/span\u003e\\\"),\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"22\\\"\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eroute\u003c/span\u003e(\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003etrending\u003c/span\u003e\\\", \\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003e./concerts/trending.tsx\u003c/span\u003e\\\"),\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"23\\\"\u003e ]),\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"24\\\"\u003e] \u003cspan style=\\\"color: var(--base0E)\\\"\u003esatisfies\u003c/span\u003e \u003cspan style=\\\"color: var(--base0A)\\\"\u003eRouteConfig\u003c/span\u003e;\\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\u003cp\u003eYou'll have access to the Route Module API, which most of the other features are built on.\u003c/p\u003e\\n\u003cp\u003eLoaders provide data to route components:\u003c/p\u003e\\n\u003cdiv data-code-block=\\\"\\\" data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\"\u003e\u003cpre data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\" style=\\\"color: var(--base05);\\\"\u003e\u003ccode\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"1\\\"\u003e\u003cspan style=\\\"color: var(--base03)\\\"\u003e// loaders provide data to components\u003c/span\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"2\\\"\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003eexport\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003easync\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003efunction\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eloader\u003c/span\u003e({ \u003cspan style=\\\"color: var(--base08)\\\"\u003eparams\u003c/span\u003e }\u003cspan style=\\\"color: var(--base0E)\\\"\u003e:\u003c/span\u003e \u003cspan style=\\\"color: var(--base0A)\\\"\u003eRoute\u003c/span\u003e.\u003cspan style=\\\"color: var(--base0A)\\\"\u003eLoaderArgs\u003c/span\u003e) {\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"3\\\"\u003e \u003cspan style=\\\"color: var(--base0A)\\\"\u003econst\u003c/span\u003e [\u003cspan style=\\\"color: var(--base08)\\\"\u003eshow\u003c/span\u003e, \u003cspan style=\\\"color: var(--base08)\\\"\u003eisLiked\u003c/span\u003e] \u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003eawait\u003c/span\u003e \u003cspan style=\\\"color: var(--base0A)\\\"\u003ePromise\u003c/span\u003e.\u003cspan style=\\\"color: var(--base0D)\\\"\u003eall\u003c/span\u003e([\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"4\\\"\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003efakeDb\u003c/span\u003e.\u003cspan style=\\\"color: var(--base0D)\\\"\u003efind\u003c/span\u003e(\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003eshow\u003c/span\u003e\\\", \u003cspan style=\\\"color: var(--base08)\\\"\u003eparams\u003c/span\u003e.\u003cspan style=\\\"color: var(--base08)\\\"\u003eid\u003c/span\u003e),\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"5\\\"\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003efakeIsLiked\u003c/span\u003e(\u003cspan style=\\\"color: var(--base08)\\\"\u003eparams\u003c/span\u003e.\u003cspan style=\\\"color: var(--base08)\\\"\u003ecity\u003c/span\u003e),\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"6\\\"\u003e ]);\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"7\\\"\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003ereturn\u003c/span\u003e { \u003cspan style=\\\"color: var(--base08)\\\"\u003eshow\u003c/span\u003e, \u003cspan style=\\\"color: var(--base08)\\\"\u003eisLiked\u003c/span\u003e };\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"8\\\"\u003e}\\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\u003cp\u003eComponents render at their configured URLs from routes.ts with the loader data passed in as a prop:\u003c/p\u003e\\n\u003cdiv data-code-block=\\\"\\\" data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\"\u003e\u003cpre data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\" style=\\\"color: var(--base05);\\\"\u003e\u003ccode\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"1\\\"\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003eexport\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003edefault\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003efunction\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eShow\u003c/span\u003e({\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"2\\\"\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003eloaderData\u003c/span\u003e,\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"3\\\"\u003e}\u003cspan style=\\\"color: var(--base0E)\\\"\u003e:\u003c/span\u003e \u003cspan style=\\\"color: var(--base0A)\\\"\u003eRoute\u003c/span\u003e.\u003cspan style=\\\"color: var(--base0A)\\\"\u003eComponentProps\u003c/span\u003e) {\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"4\\\"\u003e \u003cspan style=\\\"color: var(--base0A)\\\"\u003econst\u003c/span\u003e { \u003cspan style=\\\"color: var(--base08)\\\"\u003eshow\u003c/span\u003e, \u003cspan style=\\\"color: var(--base08)\\\"\u003eisLiked\u003c/span\u003e } \u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003eloaderData\u003c/span\u003e;\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"5\\\"\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003ereturn\u003c/span\u003e (\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"6\\\"\u003e \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003ediv\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"7\\\"\u003e \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003eh1\u003c/span\u003e\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u003cspan style=\\\"color: var(--base08)\\\"\u003eshow\u003c/span\u003e.\u003cspan style=\\\"color: var(--base08)\\\"\u003ename\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e\u0026#x3C;/\u003cspan style=\\\"color: var(--base08)\\\"\u003eh1\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"8\\\"\u003e \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003ep\u003c/span\u003e\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u003cspan style=\\\"color: var(--base08)\\\"\u003eshow\u003c/span\u003e.\u003cspan style=\\\"color: var(--base08)\\\"\u003edescription\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e\u0026#x3C;/\u003cspan style=\\\"color: var(--base08)\\\"\u003ep\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"9\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"10\\\"\u003e \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003eform\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003emethod\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003epost\u003c/span\u003e\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"11\\\"\u003e \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003ebutton\u003c/span\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"12\\\"\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003etype\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003esubmit\u003c/span\u003e\\\"\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"13\\\"\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003ename\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003eliked\u003c/span\u003e\\\"\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"14\\\"\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003evalue\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u003cspan style=\\\"color: var(--base08)\\\"\u003eisLiked\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e?\u003c/span\u003e \u003cspan style=\\\"color: var(--base09)\\\"\u003e0\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e:\u003c/span\u003e \u003cspan style=\\\"color: var(--base09)\\\"\u003e1\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"15\\\"\u003e \u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"16\\\"\u003e \u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u003cspan style=\\\"color: var(--base08)\\\"\u003eisLiked\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e?\u003c/span\u003e \\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003eRemove\u003c/span\u003e\\\" \u003cspan style=\\\"color: var(--base0E)\\\"\u003e:\u003c/span\u003e \\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003eSave\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"17\\\"\u003e \u0026#x3C;/\u003cspan style=\\\"color: var(--base08)\\\"\u003ebutton\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"18\\\"\u003e \u0026#x3C;/\u003cspan style=\\\"color: var(--base08)\\\"\u003eform\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"19\\\"\u003e \u0026#x3C;/\u003cspan style=\\\"color: var(--base08)\\\"\u003ediv\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"20\\\"\u003e );\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"21\\\"\u003e}\\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\u003cp\u003eActions can update data and trigger a revalidation of all data on\\nthe page so your UI stays up to date automatically:\u003c/p\u003e\\n\u003cdiv data-code-block=\\\"\\\" data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\"\u003e\u003cpre data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\" style=\\\"color: var(--base05);\\\"\u003e\u003ccode\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"1\\\"\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003eexport\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003easync\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003efunction\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eaction\u003c/span\u003e({\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"2\\\"\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003erequest\u003c/span\u003e,\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"3\\\"\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003eparams\u003c/span\u003e,\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"4\\\"\u003e}\u003cspan style=\\\"color: var(--base0E)\\\"\u003e:\u003c/span\u003e \u003cspan style=\\\"color: var(--base0A)\\\"\u003eRoute\u003c/span\u003e.\u003cspan style=\\\"color: var(--base0A)\\\"\u003eLoaderArgs\u003c/span\u003e) {\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"5\\\"\u003e \u003cspan style=\\\"color: var(--base0A)\\\"\u003econst\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003eformData\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003eawait\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003erequest\u003c/span\u003e.\u003cspan style=\\\"color: var(--base0D)\\\"\u003eformData\u003c/span\u003e();\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"6\\\"\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003eawait\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003efakeSetLikedShow\u003c/span\u003e(\u003cspan style=\\\"color: var(--base08)\\\"\u003eformData\u003c/span\u003e.\u003cspan style=\\\"color: var(--base0D)\\\"\u003eget\u003c/span\u003e(\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003eliked\u003c/span\u003e\\\"));\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"7\\\"\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003ereturn\u003c/span\u003e { ok: \u003cspan style=\\\"color: var(--base09)\\\"\u003etrue\u003c/span\u003e };\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"8\\\"\u003e}\\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\u003cp\u003eRoute modules also provide conventions for SEO, asset loading, error boundaries, and more.\u003c/p\u003e\\n\u003cp\u003e\u003ca href=\\\"./start/framework/installation\\\"\u003eGet Started\u003c/a\u003e with React Router as a framework.\u003c/p\u003e\",\"docs/index\",\"headings\",[371,376],{\"_372\":373,\"_366\":374,\"_22\":375},\"headingLevel\",\"h2\",\"React Router as a Library\",\"react-router-as-a-library\",{\"_372\":373,\"_366\":377,\"_22\":378},\"React Router as a framework\",\"react-router-as-a-framework\",[],\"actionData\",\"errors\"]\n");</script><script>window.__reactRouterContext.streamController.close();</script></body></html>

[ { "url": "https://reactrouter.com", "technologies": [ { "slug": "varnish", "name": "Varnish", "icon": "Varnish.svg", "cpe": "cpe:2.3:a:varnish-software:varnish_cache:*:*:*:*:*:*:*:*", "versions": [], "categories": [ { "id": 23, "slug": "caching", "name": "Caching" } ], "confirmedAt": 1724982823 }, { "slug": "react", "name": "React", "icon": "React.svg", "cpe": "cpe:2.3:a:facebook:react:*:*:*:*:*:*:*:*", "versions": [], "categories": [ { "id": 12, "slug": "javascript-frameworks", "name": "JavaScript frameworks" } ], "confirmedAt": 1724982823 }, { "slug": "remix", "name": "Remix", "icon": "Remix.svg", "versions": [], "categories": [ { "id": 18, "slug": "web-frameworks", "name": "Web frameworks" }, { "id": 22, "slug": "web-servers", "name": "Web servers" } ], "confirmedAt": 1724982823 }, { "slug": "react-router", "name": "React Router", "icon": "React Router.svg", "versions": [ "6" ], "categories": [ { "id": 12, "slug": "javascript-frameworks", "name": "JavaScript frameworks" } ], "confirmedAt": 1724982823 }, { "slug": "fly-io", "name": "Fly.io", "icon": "Fly.io.svg", "versions": [], "categories": [ { "id": 62, "slug": "paas", "name": "PaaS" } ], "confirmedAt": 1724982823 }, { "slug": "priority-hints", "name": "Priority Hints", "icon": "Priority Hints.svg", "versions": [], "categories": [ { "id": 92, "slug": "performance", "name": "Performance" } ], "confirmedAt": 1724982823 }, { "slug": "hsts", "name": "HSTS", "icon": "default.svg", "versions": [], "categories": [ { "id": 16, "slug": "security", "name": "Security" } ], "confirmedAt": 1724982823 }, { "slug": "http-3", "name": "HTTP/3", "icon": "HTTP3.svg", "versions": [], "categories": [ { "id": 19, "slug": "miscellaneous", "name": "Miscellaneous" } ], "confirmedAt": 1724982823 } ] } ]

{ "Google Analytics": "Google Analytics offers a host of compelling features and benefits for everyone from senior executives and advertising and marketing professionals to site owners and content developers.", "Google Universal Analytics": "The analytics.js JavaScript snippet is a new way to measure how users interact with your website. It is similar to the previous Google tracking code, ga.js, but offers more flexibility for developers to customize their implementations.", "Fastly": "Real-time Analytics and CDN platform. Analyze your web and server traffic patterns in real-time.", "CrUX Dataset": "CrUX is a data collection system that gathers information about how real users interact with websites. This website is included in the user experiences data gathered from Google Chrome and thus considered sufficiently popular on the Internet.", "CrUX Top 500k": "Relative measure of site popularity within the CrUX dataset, measured by the total number of navigations on the origin. This site is in the top 500k.", "Cloudflare Radar": "The website appears on the Cloudflare Radar Top 1m sites list", "Cloudflare Radar Top 500k": "The website appears in the Cloudflare Radar Top 500,000.", "Cloudflare Radar Top 200k": "The website appears in the Cloudflare Radar Top 200,000.", "Remix": "Full stack web framework.", "Express": "A web application framework for node node.js - expressjs.", "Viewport Meta": "This page uses the viewport meta tag which means the content may be optimized for mobile content.", "IPhone / Mobile Compatible": "The website contains code that allows the page to support IPhone / Mobile Content.", "Apple Mobile Web Clips Icon": "This page contains an icon for iPhone, iPad and iTouch devices.", "Cloudflare": "Automatically optimizes the delivery of your web pages so your visitors get the fastest page load times and best performance.", "HTML5 History API": "A standardized way to manipulate the browser history via script.", "JavaScript Modules": "Modern browsers now support native module functionality, optimizing loading and efficiency. Import and export statements are key for using native JavaScript modules.", "GitHub": "The website mentions github.com in some form.", "SSL by Default": "The website redirects traffic to an HTTPS/SSL version by default.", "LetsEncrypt": "Let’s Encrypt is a free open Certificate Authority.", "HSTS": "Forces browsers to only communicate with the site using HTTPS.", "Cloudflare DNS": "DNS services provided by Cloudflare.", "Cloudflare Hosting": "Supercharged web hosting service.", "Fly": "Deploy app servers close to users.", "Fastly Hosted": "Hosted at Fastly", "Fastly Load Balancer": "Hosted on Fastly's Load Balancing system.", "U.S. Server Location": "The web server is located in the United States.", "IPv6": "The website has an IPv6 record.", "Varnish": "Varnish is a web accelerator / reverse proxy caching server.", "Google Webmaster": "Webmaster tools provide you with a free and easy way to make your site more Google-friendly." }

{ "whois.verisign-grs.com": { "Domain Status": [ "clientDeleteProhibited https://icann.org/epp#clientDeleteProhibited", "clientTransferProhibited https://icann.org/epp#clientTransferProhibited", "clientUpdateProhibited https://icann.org/epp#clientUpdateProhibited" ], "Name Server": [ "ANIRBAN.NS.CLOUDFLARE.COM", "ARON.NS.CLOUDFLARE.COM" ], "Domain Name": "REACTROUTER.COM", "Registry Domain ID": "2370424772_DOMAIN_COM-VRSN", "Registrar WHOIS Server": "whois.markmonitor.com", "Registrar URL": "http://www.markmonitor.com", "Updated Date": "2023-09-29T18:15:29Z", "Created Date": "2019-03-18T05:03:04Z", "Expiry Date": "2026-03-18T05:03:04Z", "Registrar": "MarkMonitor Inc.", "Registrar IANA ID": "292", "Registrar Abuse Contact Email": "[email protected]", "Registrar Abuse Contact Phone": "+1.2086851750", "DNSSEC": "unsigned", "URL of the ICANN Whois Inaccuracy Complaint Form": "https://www.icann.org/wicf/", ">>> Last update of whois database": "2025-02-01T01:17:30Z <<<", "text": [ "For more information on Whois status codes, please visit https://icann.org/epp", "", "NOTICE: The expiration date displayed in this record is the date the", "registrar's sponsorship of the domain name registration in the registry is", "currently set to expire. This date does not necessarily reflect the expiration", "date of the domain name registrant's agreement with the sponsoring", "registrar. Users may consult the sponsoring registrar's Whois database to", "view the registrar's reported date of expiration for this registration.", "", "TERMS OF USE: You are not authorized to access or query our Whois", "database through the use of electronic processes that are high-volume and", "automated except as reasonably necessary to register domain names or", "modify existing registrations; the Data in VeriSign Global Registry", "Services' (\"VeriSign\") Whois database is provided by VeriSign for", "information purposes only, and to assist persons in obtaining information", "about or related to a domain name registration record. VeriSign does not", "guarantee its accuracy. By submitting a Whois query, you agree to abide", "by the following terms of use: You agree that you may use this Data only", "for lawful purposes and that under no circumstances will you use this Data", "to: (1) allow, enable, or otherwise support the transmission of mass", "unsolicited, commercial advertising or solicitations via e-mail, telephone,", "or facsimile; or (2) enable high volume, automated, electronic processes", "that apply to VeriSign (or its computer systems). The compilation,", "repackaging, dissemination or other use of this Data is expressly", "prohibited without the prior written consent of VeriSign. You agree not to", "use electronic processes that are automated and high-volume to access or", "query the Whois database except as reasonably necessary to register", "domain names or modify existing registrations. VeriSign reserves the right", "to restrict your access to the Whois database in its sole discretion to ensure", "operational stability. VeriSign may restrict or terminate your access to the", "Whois database for failure to abide by these terms of use. VeriSign", "reserves the right to modify these terms at any time.", "", "The Registry database contains ONLY .COM, .NET, .EDU domains and", "Registrars." ] }, "whois.markmonitor.com": { "Domain Status": [ "clientUpdateProhibited (https://www.icann.org/epp#clientUpdateProhibited)", "clientTransferProhibited (https://www.icann.org/epp#clientTransferProhibited)", "clientDeleteProhibited (https://www.icann.org/epp#clientDeleteProhibited)" ], "Name Server": [ "aron.ns.cloudflare.com", "anirban.ns.cloudflare.com" ], "Domain Name": "reactrouter.com", "Registry Domain ID": "2370424772_DOMAIN_COM-VRSN", "Registrar WHOIS Server": "whois.markmonitor.com", "Registrar URL": "http://www.markmonitor.com", "Updated Date": "2024-07-02T16:37:32+0000", "Created Date": "2019-03-18T05:03:04+0000", "Expiry Date": "2026-03-18T05:03:04+0000", "Registrar": "MarkMonitor, Inc.", "Registrar IANA ID": "292", "Registrar Abuse Contact Email": "[email protected]", "Registrar Abuse Contact Phone": "+1.2086851750", "Registrant Organization": "Shopify Inc.", "Registrant State/Province": "ON", "Registrant Country": "CA", "Registrant Email": "Select Request Email Form at https://domains.markmonitor.com/whois/reactrouter.com", "Admin Organization": "Shopify Inc.", "Admin State/Province": "ON", "Admin Country": "CA", "Admin Email": "Select Request Email Form at https://domains.markmonitor.com/whois/reactrouter.com", "Tech Organization": "Shopify Inc.", "Tech State/Province": "ON", "Tech Country": "CA", "Tech Email": "Select Request Email Form at https://domains.markmonitor.com/whois/reactrouter.com", "DNSSEC": "unsigned", "URL of the ICANN WHOIS Data Problem Reporting System": "http://wdprs.internic.net/", ">>> Last update of WHOIS database": "2025-02-01T01:17:45+0000 <<<", "text": [ "For more information on WHOIS status codes, please visit:", "https://www.icann.org/resources/pages/epp-status-codes", "", "If you wish to contact this domain’s Registrant, Administrative, or Technical", "contact, and such email address is not visible above, you may do so via our web", "form, pursuant to ICANN’s Temporary Specification. To verify that you are not a", "robot, please enter your email address to receive a link to a page that", "facilitates email communication with the relevant contact(s).", "", "Web-based WHOIS:", "https://domains.markmonitor.com/whois", "", "If you have a legitimate interest in viewing the non-public WHOIS details, send", "your request and the reasons for your request to [email protected]", "and specify the domain name in the subject line. We will review that request and", "may ask for supporting documentation and explanation.", "", "The data in MarkMonitor’s WHOIS database is provided for information purposes,", "and to assist persons in obtaining information about or related to a domain", "name’s registration record. While MarkMonitor believes the data to be accurate,", "the data is provided \"as is\" with no guarantee or warranties regarding its", "accuracy.", "", "By submitting a WHOIS query, you agree that you will use this data only for", "lawful purposes and that, under no circumstances will you use this data to:", "(1) allow, enable, or otherwise support the transmission by email, telephone,", "or facsimile of mass, unsolicited, commercial advertising, or spam; or", "(2) enable high volume, automated, or electronic processes that send queries,", "data, or email to MarkMonitor (or its systems) or the domain name contacts (or", "its systems).", "", "MarkMonitor reserves the right to modify these terms at any time.", "", "By submitting this query, you agree to abide by this policy.", "", "MarkMonitor Domain Management(TM)", "Protecting companies and consumers in a digital world.", "", "Visit MarkMonitor at https://www.markmonitor.com", "Contact us at +1.8007459229", "In Europe, at +44.02032062220" ] } }