├── .browserslistrc
├── .changeset
├── README.md
└── config.json
├── .eslintignore
├── .eslintrc
├── .github
├── FUNDING.yml
├── ISSUE_TEMPLATE
│ ├── bug_report.yml
│ ├── config.yml
│ └── documentation_isse.yml
├── dependabot.yml
└── workflows
│ ├── close-feature-pr.yml
│ ├── close-no-repro-issue.yml
│ ├── close-no-repro-issues.yml
│ ├── deduplicate-lock-file.yml
│ ├── format.yml
│ ├── integration-full.yml
│ ├── integration-pr-ubuntu.yml
│ ├── integration-pr-windows-macos.yml
│ ├── no-response.yml
│ ├── release-comments.yml
│ ├── release-experimental.yml
│ ├── release-nightly.yml
│ ├── release-stage-2-alpha.yml
│ ├── release.yml
│ ├── shared-build.yml
│ ├── shared-integration.yml
│ ├── support.yml
│ └── test.yml
├── .gitignore
├── .npmrc
├── .nvmrc
├── .vscode
└── settings.json
├── CHANGELOG.md
├── CLA.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── DEVELOPMENT.md
├── GOVERNANCE.md
├── LICENSE.md
├── README.md
├── SECURITY.md
├── build.utils.ts
├── contributors.yml
├── decisions
├── 0001-use-blocker.md
├── 0001-use-npm-to-manage-npm-dependencies-for-deno-projects.md
├── 0002-do-not-clone-request.md
├── 0002-lazy-route-modules.md
├── 0003-data-strategy.md
├── 0003-infer-types-for-useloaderdata-and-useactiondata-from-loader-and-action-via-generics.md
├── 0004-streaming-apis.md
├── 0005-remixing-react-router.md
├── 0006-linear-workflow.md
├── 0007-remix-on-react-router-6-4-0.md
├── 0008-only-support-js-conversion-for-app-code.md
├── 0009-do-not-rely-on-treeshaking-for-correctness.md
├── 0010-splitting-up-client-and-server-code-in-vite.md
├── 0011-routes-ts.md
├── 0012-type-inference.md
├── 0013-react-router-config-ts.md
├── 0014-context-middleware.md
└── template.md
├── docs
├── api
│ ├── components
│ │ ├── Await.md
│ │ ├── Form.md
│ │ ├── Link.md
│ │ ├── Links.md
│ │ ├── Meta.md
│ │ ├── NavLink.md
│ │ ├── Navigate.md
│ │ ├── Outlet.md
│ │ ├── PrefetchPageLinks.md
│ │ ├── Route.md
│ │ ├── Routes.md
│ │ ├── Scripts.md
│ │ ├── ScrollRestoration.md
│ │ ├── ServerRouter.md
│ │ └── index.md
│ ├── data-routers
│ │ ├── HydratedRouter.md
│ │ ├── RouterProvider.md
│ │ ├── StaticRouterProvider.md
│ │ ├── createBrowserRouter.md
│ │ ├── createHashRouter.md
│ │ ├── createMemoryRouter.md
│ │ ├── createStaticRouter.md
│ │ └── index.md
│ ├── declarative-routers
│ │ ├── BrowserRouter.md
│ │ ├── HashRouter.md
│ │ ├── MemoryRouter.md
│ │ ├── Router.md
│ │ ├── StaticRouter.md
│ │ ├── index.md
│ │ └── unstable_HistoryRouter.md
│ ├── framework-conventions
│ │ ├── client-modules.md
│ │ ├── entry.client.tsx.md
│ │ ├── entry.server.tsx.md
│ │ ├── index.md
│ │ ├── react-router.config.ts.md
│ │ ├── root.tsx.md
│ │ ├── routes.ts.md
│ │ └── server-modules.md
│ ├── hooks
│ │ ├── index.md
│ │ ├── useActionData.md
│ │ ├── useAsyncError.md
│ │ ├── useAsyncValue.md
│ │ ├── useBeforeUnload.md
│ │ ├── useBlocker.md
│ │ ├── useFetcher.md
│ │ ├── useFetchers.md
│ │ ├── useFormAction.md
│ │ ├── useHref.md
│ │ ├── useInRouterContext.md
│ │ ├── useLinkClickHandler.md
│ │ ├── useLoaderData.md
│ │ ├── useLocation.md
│ │ ├── useMatch.md
│ │ ├── useMatches.md
│ │ ├── useNavigate.md
│ │ ├── useNavigation.md
│ │ ├── useNavigationType.md
│ │ ├── useOutlet.md
│ │ ├── useOutletContext.md
│ │ ├── useParams.md
│ │ ├── usePrompt.md
│ │ ├── useResolvedPath.md
│ │ ├── useRevalidator.md
│ │ ├── useRouteError.md
│ │ ├── useRouteLoaderData.md
│ │ ├── useRoutes.md
│ │ ├── useSearchParams.md
│ │ ├── useSubmit.md
│ │ └── useViewTransitionState.md
│ ├── index.md
│ └── utils
│ │ ├── IsCookieFunction.md
│ │ ├── IsSessionFunction.md
│ │ ├── Location.md
│ │ ├── createCookie.md
│ │ ├── createCookieSessionStorage.md
│ │ ├── createMemorySessionStorage.md
│ │ ├── createPath.md
│ │ ├── createRequestHandler.md
│ │ ├── createRoutesFromElements.md
│ │ ├── createRoutesStub.md
│ │ ├── createSearchParams.md
│ │ ├── createSession.md
│ │ ├── createSessionStorage.md
│ │ ├── createStaticHandler.md
│ │ ├── data.md
│ │ ├── generatePath.md
│ │ ├── href.md
│ │ ├── index.md
│ │ ├── isCookie.md
│ │ ├── isRouteErrorResponse.md
│ │ ├── isSession.md
│ │ ├── matchPath.md
│ │ ├── matchRoutes.md
│ │ ├── parsePath.md
│ │ ├── redirect.md
│ │ ├── redirectDocument.md
│ │ ├── renderMatches.md
│ │ ├── replace.md
│ │ └── resolvePath.md
├── community
│ ├── api-development-strategy.md
│ ├── contributing.md
│ └── index.md
├── elements.md
├── explanation
│ ├── README
│ ├── backend-for-frontend.md
│ ├── code-splitting.md
│ ├── concurrency.md
│ ├── form-vs-fetcher.md
│ ├── hot-module-replacement.md
│ ├── hydration.md
│ ├── index-query-param.md
│ ├── index.md
│ ├── lazy-route-discovery.md
│ ├── location.md
│ ├── progressive-enhancement.md
│ ├── race-conditions.md
│ ├── route-matching.md
│ ├── server-client-execution.md
│ ├── sessions-and-cookies.md
│ ├── special-files.md
│ ├── state-management.md
│ └── type-safety.md
├── how-to
│ ├── README
│ ├── accessibility.md
│ ├── client-data.md
│ ├── error-boundary.md
│ ├── error-reporting.md
│ ├── fetchers.md
│ ├── file-route-conventions.md
│ ├── file-uploads.md
│ ├── form-validation.md
│ ├── headers.md
│ ├── index.md
│ ├── meta.md
│ ├── navigation-blocking.md
│ ├── optimize-revalidation.md
│ ├── pre-rendering.md
│ ├── presets.md
│ ├── react-server-components.md
│ ├── resource-routes.md
│ ├── route-module-type-safety.md
│ ├── search-params.md
│ ├── security.md
│ ├── server-bundles.md
│ ├── spa.md
│ ├── status.md
│ ├── suspense.md
│ ├── view-transitions.md
│ └── webhook.md
├── index.md
├── prettier.config.js
├── start
│ ├── README
│ ├── data
│ │ ├── actions.md
│ │ ├── custom.md
│ │ ├── data-loading.md
│ │ ├── index.md
│ │ ├── installation.md
│ │ ├── navigating.md
│ │ ├── pending-ui.md
│ │ ├── route-object.md
│ │ ├── routing.md
│ │ └── testing.md
│ ├── declarative
│ │ ├── index.md
│ │ ├── installation.md
│ │ ├── navigating.md
│ │ ├── routing.md
│ │ └── url-values.md
│ ├── framework
│ │ ├── actions.md
│ │ ├── data-loading.md
│ │ ├── deploying.md
│ │ ├── index.md
│ │ ├── installation.md
│ │ ├── navigating.md
│ │ ├── pending-ui.md
│ │ ├── rendering.md
│ │ ├── route-module.md
│ │ ├── routing.md
│ │ └── testing.md
│ ├── index.md
│ └── modes.md
├── tutorials
│ ├── README
│ ├── address-book.md
│ ├── advanced-data-fetching.md
│ ├── index.md
│ └── quickstart.md
└── upgrading
│ ├── README
│ ├── component-routes.md
│ ├── future.md
│ ├── index.md
│ ├── remix.md
│ ├── router-provider.md
│ └── v6.md
├── examples
├── README.md
├── auth-router-provider
│ ├── .gitignore
│ ├── .stackblitzrc
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── App.tsx
│ │ ├── auth.ts
│ │ ├── index.css
│ │ ├── main.tsx
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── auth
│ ├── .gitignore
│ ├── .stackblitzrc
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── App.tsx
│ │ ├── auth.ts
│ │ ├── index.css
│ │ ├── main.tsx
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── basic-data-router
│ ├── .gitignore
│ ├── .stackblitzrc
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── app.tsx
│ │ ├── index.css
│ │ ├── main.tsx
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── basic
│ ├── .gitignore
│ ├── .stackblitzrc
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── App.tsx
│ │ ├── index.css
│ │ ├── main.tsx
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── custom-filter-link
│ ├── .gitignore
│ ├── .stackblitzrc
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── App.tsx
│ │ ├── index.css
│ │ ├── main.tsx
│ │ ├── snkrs.ts
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── custom-link
│ ├── .gitignore
│ ├── .stackblitzrc
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── App.tsx
│ │ ├── index.css
│ │ ├── main.tsx
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── custom-query-parsing
│ ├── .gitignore
│ ├── .stackblitzrc
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── App.tsx
│ │ ├── index.css
│ │ ├── main.tsx
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ ├── types
│ │ └── jsurl.d.ts
│ └── vite.config.ts
├── data-router
│ ├── .gitignore
│ ├── .stackblitzrc
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── app.tsx
│ │ ├── index.css
│ │ ├── main.tsx
│ │ ├── todos.ts
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── error-boundaries
│ ├── .gitignore
│ ├── .stackblitzrc
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── app.tsx
│ │ ├── index.css
│ │ ├── main.tsx
│ │ ├── routes.tsx
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── lazy-loading-router-provider
│ ├── .gitignore
│ ├── .stackblitzrc
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── App.tsx
│ │ ├── index.css
│ │ ├── main.tsx
│ │ ├── pages
│ │ │ ├── About.tsx
│ │ │ └── Dashboard.tsx
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── lazy-loading
│ ├── .gitignore
│ ├── .stackblitzrc
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── App.tsx
│ │ ├── index.css
│ │ ├── main.tsx
│ │ ├── pages
│ │ │ ├── About.tsx
│ │ │ └── Dashboard.tsx
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── modal-route-with-outlet
│ ├── .gitignore
│ ├── .stackblitzrc
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── App.tsx
│ │ ├── images.ts
│ │ ├── index.css
│ │ ├── main.tsx
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── modal
│ ├── .gitignore
│ ├── .stackblitzrc
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── App.tsx
│ │ ├── images.ts
│ │ ├── index.css
│ │ ├── main.tsx
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── multi-app
│ ├── .gitignore
│ ├── .stackblitzrc
│ ├── README.md
│ ├── home
│ │ ├── App.jsx
│ │ ├── index.css
│ │ ├── main.jsx
│ │ └── no-match.jsx
│ ├── inbox
│ │ ├── App.jsx
│ │ ├── index.css
│ │ ├── index.html
│ │ ├── main.jsx
│ │ ├── messages.js
│ │ └── no-match.jsx
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── server.js
│ └── vite.config.js
├── navigation-blocking
│ ├── .gitignore
│ ├── .stackblitzrc
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── app.tsx
│ │ ├── main.tsx
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── notes
│ ├── .gitignore
│ ├── .stackblitzrc
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── app.jsx
│ │ ├── index.css
│ │ ├── main.jsx
│ │ ├── notes.js
│ │ ├── routes
│ │ │ ├── new.jsx
│ │ │ ├── note.jsx
│ │ │ ├── notes.jsx
│ │ │ └── root.jsx
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── route-objects
│ ├── .gitignore
│ ├── .stackblitzrc
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── App.tsx
│ │ ├── index.css
│ │ ├── main.tsx
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── scroll-restoration
│ ├── .gitignore
│ ├── .stackblitzrc
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── app.tsx
│ │ ├── index.css
│ │ ├── main.tsx
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── search-params
│ ├── .gitignore
│ ├── .stackblitzrc
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── App.tsx
│ │ ├── index.css
│ │ ├── main.tsx
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── ssr-data-router
│ ├── .stackblitzrc
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── server.js
│ ├── src
│ │ ├── App.tsx
│ │ ├── entry.client.tsx
│ │ ├── entry.server.tsx
│ │ ├── index.css
│ │ ├── lazy.tsx
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ └── vite.config.js
├── ssr
│ ├── .stackblitzrc
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── server.js
│ ├── src
│ │ ├── App.tsx
│ │ ├── entry.client.tsx
│ │ ├── entry.server.tsx
│ │ ├── index.css
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ └── vite.config.js
└── view-transitions
│ ├── .gitignore
│ ├── .stackblitzrc
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ ├── index.css
│ ├── main.tsx
│ └── vite-env.d.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── integration
├── CHANGELOG.md
├── abort-signal-test.ts
├── action-test.ts
├── assets
│ ├── toupload.txt
│ └── touploadtoobig.txt
├── blocking-test.ts
├── browser-entry-test.ts
├── bug-report-test.ts
├── catch-boundary-data-test.ts
├── catch-boundary-test.ts
├── cli-test.ts
├── client-data-test.ts
├── custom-entry-server-test.ts
├── defer-loader-test.ts
├── defer-test.ts
├── error-boundary-test.ts
├── error-boundary-v2-test.ts
├── error-data-request-test.ts
├── error-sanitization-test.ts
├── fetch-globals-test.ts
├── fetcher-layout-test.ts
├── fetcher-test.ts
├── fog-of-war-test.ts
├── form-data-test.ts
├── form-test.ts
├── fs-routes-test.ts
├── headers-test.ts
├── helpers
│ ├── cleanup.mjs
│ ├── cloudflare-dev-proxy-template
│ │ ├── .gitignore
│ │ ├── app
│ │ │ ├── entry.server.tsx
│ │ │ ├── root.tsx
│ │ │ ├── routes.ts
│ │ │ └── routes
│ │ │ │ └── _index.tsx
│ │ ├── package.json
│ │ ├── public
│ │ │ └── favicon.ico
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ ├── create-fixture.ts
│ ├── playwright-fixture.ts
│ ├── vite-5-template
│ │ ├── .gitignore
│ │ ├── app
│ │ │ ├── root.tsx
│ │ │ ├── routes.ts
│ │ │ └── routes
│ │ │ │ └── _index.tsx
│ │ ├── env.d.ts
│ │ ├── package.json
│ │ ├── public
│ │ │ └── favicon.ico
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ ├── vite-6-template
│ │ ├── .gitignore
│ │ ├── app
│ │ │ ├── root.tsx
│ │ │ ├── routes.ts
│ │ │ └── routes
│ │ │ │ └── _index.tsx
│ │ ├── env.d.ts
│ │ ├── package.json
│ │ ├── public
│ │ │ └── favicon.ico
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ ├── vite-7-beta-template
│ │ ├── .gitignore
│ │ ├── app
│ │ │ ├── root.tsx
│ │ │ ├── routes.ts
│ │ │ └── routes
│ │ │ │ └── _index.tsx
│ │ ├── env.d.ts
│ │ ├── package.json
│ │ ├── public
│ │ │ └── favicon.ico
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ ├── vite-plugin-cloudflare-template
│ │ ├── .gitignore
│ │ ├── app
│ │ │ ├── entry.server.tsx
│ │ │ ├── root.tsx
│ │ │ ├── routes.ts
│ │ │ └── routes
│ │ │ │ └── _index.tsx
│ │ ├── package.json
│ │ ├── public
│ │ │ └── favicon.ico
│ │ ├── react-router.config.ts
│ │ ├── tsconfig.cloudflare.json
│ │ ├── tsconfig.json
│ │ ├── tsconfig.node.json
│ │ ├── vite.config.ts
│ │ ├── workers
│ │ │ └── app.ts
│ │ └── wrangler.toml
│ ├── vite-rolldown-template
│ │ ├── .gitignore
│ │ ├── app
│ │ │ ├── root.tsx
│ │ │ ├── routes.ts
│ │ │ └── routes
│ │ │ │ └── _index.tsx
│ │ ├── env.d.ts
│ │ ├── package.json
│ │ ├── public
│ │ │ └── favicon.ico
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ └── vite.ts
├── hook-useSubmit-test.ts
├── layout-route-test.ts
├── link-test.ts
├── loader-test.ts
├── matches-test.ts
├── middleware-test.ts
├── multiple-cookies-test.ts
├── navigation-state-test.ts
├── package.json
├── playwright.config.ts
├── prefetch-test.ts
├── redirects-test.ts
├── remix-serve-test.ts
├── rendering-test.ts
├── request-test.ts
├── resource-routes-test.ts
├── revalidate-test.ts
├── root-route-test.ts
├── route-collisions-test.ts
├── route-config-test.ts
├── scroll-test.ts
├── server-entry-test.ts
├── set-cookie-revalidation-test.ts
├── single-fetch-test.ts
├── splat-routes-test.ts
├── split-route-modules-test.ts
├── transition-test.ts
├── tsconfig.json
├── typegen-test.ts
├── vite-absolute-base-test.ts
├── vite-basename-test.ts
├── vite-build-test.ts
├── vite-cloudflare-test.ts
├── vite-css-test.ts
├── vite-dev-custom-entry-test.ts
├── vite-dev-test.ts
├── vite-dot-client-test.ts
├── vite-dot-server-test.ts
├── vite-dotenv-test.ts
├── vite-hmr-hdr-test.ts
├── vite-loader-context-test.ts
├── vite-manifests-test.ts
├── vite-node-env-test.ts
├── vite-plugin-cloudflare-test.ts
├── vite-plugin-order-validation-test.ts
├── vite-prerender-test.ts
├── vite-presets-test.ts
├── vite-route-added-test.ts
├── vite-route-exports-modified-offscreen-test.ts
├── vite-server-bundles-test.ts
├── vite-server-fs-allow-test.ts
├── vite-spa-mode-test.ts
└── vite-unused-route-exports-test.ts
├── jest
├── jest.config.shared.js
└── transform.js
├── package.json
├── packages
├── create-react-router
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── __tests__
│ │ ├── create-react-router-test.ts
│ │ ├── fixtures
│ │ │ ├── basic
│ │ │ │ ├── .gitignore
│ │ │ │ ├── README.md
│ │ │ │ ├── app
│ │ │ │ │ ├── root.tsx
│ │ │ │ │ ├── routes.ts
│ │ │ │ │ └── routes
│ │ │ │ │ │ └── home.tsx
│ │ │ │ ├── package.json
│ │ │ │ ├── public
│ │ │ │ │ └── favicon.ico
│ │ │ │ ├── tsconfig.json
│ │ │ │ └── vite.config.ts
│ │ │ ├── blank
│ │ │ │ └── package.json
│ │ │ ├── nested-dir-repo.tar.gz
│ │ │ ├── template.tar.gz
│ │ │ ├── template.tgz
│ │ │ ├── templates-repo.tar.gz
│ │ │ └── with-ignored-dir
│ │ │ │ └── package.json
│ │ ├── github-mocks.ts
│ │ ├── msw-register.ts
│ │ ├── msw.ts
│ │ └── setupAfterEnv.ts
│ ├── cli.ts
│ ├── copy-template.ts
│ ├── index.ts
│ ├── jest.config.js
│ ├── loading-indicator.ts
│ ├── package.json
│ ├── prompt.ts
│ ├── prompts-confirm.ts
│ ├── prompts-multi-select.ts
│ ├── prompts-prompt-base.ts
│ ├── prompts-select.ts
│ ├── prompts-text.ts
│ ├── tsconfig.json
│ ├── tsup.config.ts
│ └── utils.ts
├── react-router-architect
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── __tests__
│ │ ├── 554828.jpeg
│ │ ├── binaryTypes-test.ts
│ │ └── server-test.ts
│ ├── binaryTypes.ts
│ ├── index.ts
│ ├── jest.config.js
│ ├── package.json
│ ├── server.ts
│ ├── sessions
│ │ └── arcTableSessionStorage.ts
│ ├── tsconfig.json
│ ├── tsup.config.ts
│ └── typedoc.json
├── react-router-cloudflare
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── index.ts
│ ├── package.json
│ ├── sessions
│ │ └── workersKVStorage.ts
│ ├── tsconfig.json
│ ├── tsup.config.ts
│ ├── typedoc.json
│ └── worker.ts
├── react-router-dev
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── __tests__
│ │ ├── fixtures
│ │ │ └── basic
│ │ │ │ ├── .gitignore
│ │ │ │ ├── app
│ │ │ │ ├── root.tsx
│ │ │ │ ├── routes.ts
│ │ │ │ └── routes
│ │ │ │ │ └── _index.tsx
│ │ │ │ ├── package.json
│ │ │ │ ├── public
│ │ │ │ └── favicon.ico
│ │ │ │ └── tsconfig.json
│ │ ├── route-config-test.ts
│ │ ├── setupAfterEnv.ts
│ │ ├── styles-test.ts
│ │ └── utils
│ │ │ ├── captureError.ts
│ │ │ ├── cli.ts
│ │ │ ├── eol.ts
│ │ │ ├── git.ts
│ │ │ └── withApp.ts
│ ├── bin.js
│ ├── cli
│ │ ├── commands.ts
│ │ ├── detectPackageManager.ts
│ │ ├── index.ts
│ │ ├── run.ts
│ │ └── useJavascript.ts
│ ├── config.ts
│ ├── config
│ │ ├── config.ts
│ │ ├── defaults
│ │ │ ├── entry.client.tsx
│ │ │ └── entry.server.node.tsx
│ │ ├── format.ts
│ │ ├── is-react-router-repo.ts
│ │ └── routes.ts
│ ├── invariant.ts
│ ├── jest.config.js
│ ├── manifest.ts
│ ├── module-sync-enabled
│ │ ├── false.cjs
│ │ ├── index.d.mts
│ │ ├── index.mjs
│ │ └── true.mjs
│ ├── package.json
│ ├── routes.ts
│ ├── tsconfig.json
│ ├── tsup.config.ts
│ ├── typedoc.json
│ ├── typegen
│ │ ├── context.ts
│ │ ├── generate.ts
│ │ ├── index.ts
│ │ ├── params.ts
│ │ └── route.ts
│ ├── vite.ts
│ └── vite
│ │ ├── babel.ts
│ │ ├── build.ts
│ │ ├── cache.ts
│ │ ├── cloudflare-dev-proxy.ts
│ │ ├── cloudflare.ts
│ │ ├── combine-urls-test.ts
│ │ ├── combine-urls.ts
│ │ ├── dev.ts
│ │ ├── node-adapter.ts
│ │ ├── plugin.ts
│ │ ├── profiler.ts
│ │ ├── remove-exports-test.ts
│ │ ├── remove-exports.ts
│ │ ├── resolve-file-url.ts
│ │ ├── route-chunks-test.ts
│ │ ├── route-chunks.ts
│ │ ├── ssr-externals.ts
│ │ ├── static
│ │ └── refresh-utils.cjs
│ │ ├── styles.ts
│ │ ├── virtual-module.ts
│ │ ├── vite-node.ts
│ │ ├── vite.ts
│ │ └── with-props.ts
├── react-router-dom
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── index.ts
│ ├── package.json
│ ├── tsconfig.json
│ └── tsup.config.ts
├── react-router-express
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── __tests__
│ │ └── server-test.ts
│ ├── index.ts
│ ├── jest.config.js
│ ├── package.json
│ ├── server.ts
│ ├── tsconfig.json
│ ├── tsup.config.ts
│ └── typedoc.json
├── react-router-fs-routes
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── __tests__
│ │ ├── flatRoutes-test.ts
│ │ └── routeManifestToRouteConfig-test.ts
│ ├── flatRoutes.ts
│ ├── index.ts
│ ├── jest.config.js
│ ├── manifest.ts
│ ├── normalizeSlashes.ts
│ ├── package.json
│ ├── tsconfig.json
│ ├── tsup.config.ts
│ └── typedoc.json
├── react-router-node
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── __tests__
│ │ └── sessions-test.ts
│ ├── index.ts
│ ├── jest.config.js
│ ├── package.json
│ ├── server.ts
│ ├── sessions
│ │ └── fileStorage.ts
│ ├── stream.ts
│ ├── tsconfig.json
│ ├── tsup.config.ts
│ └── typedoc.json
├── react-router-remix-routes-option-adapter
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── __tests__
│ │ ├── defineRoutes-test.ts
│ │ └── routeManifestToRouteConfig-test.ts
│ ├── defineRoutes.ts
│ ├── index.ts
│ ├── jest.config.js
│ ├── manifest.ts
│ ├── normalizeSlashes.ts
│ ├── package.json
│ ├── tsconfig.json
│ ├── tsup.config.ts
│ └── typedoc.json
├── react-router-serve
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── bin.js
│ ├── cli.ts
│ ├── package.json
│ ├── tsconfig.json
│ ├── tsup.config.ts
│ └── typedoc.json
└── react-router
│ ├── .eslintrc.js
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── __tests__
│ ├── .eslintrc
│ ├── Route-test.tsx
│ ├── Router-basename-test.tsx
│ ├── Router-test.tsx
│ ├── Routes-location-test.tsx
│ ├── Routes-test.tsx
│ ├── __snapshots__
│ │ └── route-matching-test.tsx.snap
│ ├── absolute-path-matching-test.tsx
│ ├── createRoutesFromChildren-test.tsx
│ ├── data-memory-router-test.tsx
│ ├── data-router-no-dom-test.tsx
│ ├── descendant-routes-params-test.tsx
│ ├── descendant-routes-splat-matching-test.tsx
│ ├── descendant-routes-warning-test.tsx
│ ├── dom
│ │ ├── components
│ │ │ └── LazyComponent.tsx
│ │ ├── concurrent-mode-navigations-test.tsx
│ │ ├── data-browser-router-legacy-formdata-test.tsx
│ │ ├── data-browser-router-test.tsx
│ │ ├── data-static-router-test.tsx
│ │ ├── dom-export-test.tsx
│ │ ├── flush-sync-navigations-test.tsx
│ │ ├── link-click-test.tsx
│ │ ├── link-href-test.tsx
│ │ ├── link-push-test.tsx
│ │ ├── nav-link-active-test.tsx
│ │ ├── navigate-encode-params-test.tsx
│ │ ├── partial-hydration-test.tsx
│ │ ├── polyfills
│ │ │ └── drop-FormData-submitter.ts
│ │ ├── scroll-restoration-test.tsx
│ │ ├── search-params-test.tsx
│ │ ├── special-characters-test.tsx
│ │ ├── ssr
│ │ │ ├── components-test.tsx
│ │ │ └── meta-test.tsx
│ │ ├── static-link-test.tsx
│ │ ├── static-location-test.tsx
│ │ ├── static-navigate-test.tsx
│ │ ├── stub-test.tsx
│ │ ├── trailing-slashes-test.tsx
│ │ ├── use-blocker-test.tsx
│ │ ├── use-prompt-test.tsx
│ │ └── useLinkClickHandler-test.tsx
│ ├── generatePath-test.tsx
│ ├── gh-issue-8127-test.tsx
│ ├── gh-issue-8165-test.tsx
│ ├── greedy-matching-test.tsx
│ ├── href-test.ts
│ ├── index-routes-test.tsx
│ ├── layout-routes-test.tsx
│ ├── matchPath-test.tsx
│ ├── matchRoutes-test.tsx
│ ├── navigate-test.tsx
│ ├── params-decode-test.tsx
│ ├── path-matching-test.tsx
│ ├── resolvePath-test.tsx
│ ├── route-depth-order-matching-test.tsx
│ ├── route-matching-test.tsx
│ ├── router
│ │ ├── TestSequences
│ │ │ ├── EncodedReservedCharacters.ts
│ │ │ ├── GoBack.ts
│ │ │ ├── GoForward.ts
│ │ │ ├── InitialLocationDefaultKey.ts
│ │ │ ├── InitialLocationHasKey.ts
│ │ │ ├── Listen.ts
│ │ │ ├── ListenPopOnly.ts
│ │ │ ├── PushMissingPathname.ts
│ │ │ ├── PushNewLocation.ts
│ │ │ ├── PushRelativePathname.ts
│ │ │ ├── PushRelativePathnameWarning.ts
│ │ │ ├── PushSamePath.ts
│ │ │ ├── PushState.ts
│ │ │ ├── PushStateInvalid.ts
│ │ │ ├── ReplaceNewLocation.ts
│ │ │ ├── ReplaceSamePath.ts
│ │ │ └── ReplaceState.ts
│ │ ├── browser-test.ts
│ │ ├── context-middleware-test.ts
│ │ ├── create-path-test.ts
│ │ ├── data-strategy-test.ts
│ │ ├── fetchers-test.ts
│ │ ├── flush-sync-test.ts
│ │ ├── hash-base-test.ts
│ │ ├── hash-test.ts
│ │ ├── interruptions-test.ts
│ │ ├── lazy-discovery-test.ts
│ │ ├── lazy-test.ts
│ │ ├── memory-test.ts
│ │ ├── navigation-blocking-test.ts
│ │ ├── navigation-test.ts
│ │ ├── path-resolution-test.ts
│ │ ├── redirects-test.ts
│ │ ├── resolveTo-test.tsx
│ │ ├── revalidate-test.ts
│ │ ├── route-fallback-test.ts
│ │ ├── router-memory-test.ts
│ │ ├── router-test.ts
│ │ ├── scroll-restoration-test.ts
│ │ ├── should-revalidate-test.ts
│ │ ├── ssr-test.ts
│ │ ├── submission-test.ts
│ │ ├── utils
│ │ │ ├── custom-matchers.ts
│ │ │ ├── data-router-setup.ts
│ │ │ ├── urlDataStrategy.ts
│ │ │ └── utils.ts
│ │ └── view-transition-test.ts
│ ├── same-component-lifecycle-test.tsx
│ ├── server-runtime
│ │ ├── cookies-test.ts
│ │ ├── data-test.ts
│ │ ├── handle-error-test.ts
│ │ ├── handler-test.ts
│ │ ├── markup-test.ts
│ │ ├── responses-test.ts
│ │ ├── server-test.ts
│ │ ├── sessions-test.ts
│ │ └── utils.ts
│ ├── setup.ts
│ ├── use-revalidator-test.tsx
│ ├── useHref-basename-test.tsx
│ ├── useHref-test.tsx
│ ├── useLocation-test.tsx
│ ├── useMatch-test.tsx
│ ├── useNavigate-test.tsx
│ ├── useOutlet-test.tsx
│ ├── useParams-test.tsx
│ ├── useResolvedPath-test.tsx
│ ├── useRoutes-test.tsx
│ ├── utils
│ │ ├── MemoryNavigate.tsx
│ │ ├── framework.ts
│ │ ├── getHtml.ts
│ │ ├── renderStrict.tsx
│ │ ├── tick.ts
│ │ └── waitForRedirect.tsx
│ └── vendor
│ │ └── turbo-stream-test.ts
│ ├── dom-export.ts
│ ├── index.ts
│ ├── jest.config.js
│ ├── lib
│ ├── components.tsx
│ ├── context.ts
│ ├── dom-export
│ │ ├── dom-router-provider.tsx
│ │ └── hydrated-router.tsx
│ ├── dom
│ │ ├── dom.ts
│ │ ├── global.ts
│ │ ├── lib.tsx
│ │ ├── node-main.js
│ │ ├── server.tsx
│ │ └── ssr
│ │ │ ├── components.tsx
│ │ │ ├── data.ts
│ │ │ ├── entry.ts
│ │ │ ├── errorBoundaries.tsx
│ │ │ ├── errors.ts
│ │ │ ├── fallback.tsx
│ │ │ ├── fog-of-war.ts
│ │ │ ├── hydration.tsx
│ │ │ ├── invariant.ts
│ │ │ ├── links.ts
│ │ │ ├── markup.ts
│ │ │ ├── routeModules.ts
│ │ │ ├── routes-test-stub.tsx
│ │ │ ├── routes.tsx
│ │ │ ├── server.tsx
│ │ │ └── single-fetch.tsx
│ ├── hooks.tsx
│ ├── href.ts
│ ├── router
│ │ ├── history.ts
│ │ ├── links.ts
│ │ ├── router.ts
│ │ └── utils.ts
│ ├── server-runtime
│ │ ├── .eslintrc.js
│ │ ├── build.ts
│ │ ├── cookies.ts
│ │ ├── crypto.ts
│ │ ├── data.ts
│ │ ├── dev.ts
│ │ ├── entry.ts
│ │ ├── errors.ts
│ │ ├── headers.ts
│ │ ├── invariant.ts
│ │ ├── markup.ts
│ │ ├── mode.ts
│ │ ├── routeMatching.ts
│ │ ├── routes.ts
│ │ ├── server.ts
│ │ ├── serverHandoff.ts
│ │ ├── sessions.ts
│ │ ├── sessions
│ │ │ ├── cookieStorage.ts
│ │ │ └── memoryStorage.ts
│ │ ├── single-fetch.ts
│ │ └── warnings.ts
│ └── types
│ │ ├── future.ts
│ │ ├── internal.ts
│ │ ├── params.ts
│ │ ├── register.ts
│ │ ├── route-data.ts
│ │ ├── route-module-annotations.ts
│ │ ├── route-module.ts
│ │ ├── serializes-to.ts
│ │ └── utils.ts
│ ├── node-main-dom-export.js
│ ├── node-main.js
│ ├── package.json
│ ├── tsconfig.dom.json
│ ├── tsconfig.json
│ ├── tsup.config.ts
│ ├── typedoc.json
│ └── vendor
│ └── turbo-stream-v2
│ ├── flatten.ts
│ ├── turbo-stream.ts
│ ├── unflatten.ts
│ └── utils.ts
├── patches
├── @changesets__assemble-release-plan.patch
└── @changesets__get-dependents-graph@1.3.6.patch
├── playground
├── framework-express
│ ├── .gitignore
│ ├── app
│ │ ├── root.tsx
│ │ ├── routes.ts
│ │ └── routes
│ │ │ └── _index.tsx
│ ├── package.json
│ ├── public
│ │ └── favicon.ico
│ ├── react-router.config.ts
│ ├── server.js
│ ├── tsconfig.json
│ └── vite.config.ts
├── framework-rolldown-vite
│ ├── .gitignore
│ ├── app
│ │ ├── root.tsx
│ │ ├── routes.ts
│ │ └── routes
│ │ │ ├── _index.tsx
│ │ │ └── product.tsx
│ ├── package.json
│ ├── public
│ │ └── favicon.ico
│ ├── react-router.config.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── framework-spa
│ ├── .gitignore
│ ├── app
│ │ ├── root.tsx
│ │ ├── routes.ts
│ │ └── routes
│ │ │ └── _index.tsx
│ ├── package.json
│ ├── public
│ │ └── favicon.ico
│ ├── react-router.config.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── framework-vite-5
│ ├── .gitignore
│ ├── app
│ │ ├── root.tsx
│ │ ├── routes.ts
│ │ └── routes
│ │ │ ├── _index.tsx
│ │ │ └── product.tsx
│ ├── package.json
│ ├── public
│ │ └── favicon.ico
│ ├── react-router.config.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── framework-vite-7-beta
│ ├── .gitignore
│ ├── app
│ │ ├── root.tsx
│ │ ├── routes.ts
│ │ └── routes
│ │ │ ├── _index.tsx
│ │ │ └── product.tsx
│ ├── package.json
│ ├── public
│ │ └── favicon.ico
│ ├── react-router.config.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── framework
│ ├── .gitignore
│ ├── app
│ │ ├── root.tsx
│ │ ├── routes.ts
│ │ └── routes
│ │ │ ├── _index.tsx
│ │ │ └── product.tsx
│ ├── package.json
│ ├── public
│ │ └── favicon.ico
│ ├── react-router.config.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── middleware
│ ├── .gitignore
│ ├── app
│ │ ├── contexts.ts
│ │ ├── root.tsx
│ │ ├── routes.ts
│ │ └── routes
│ │ │ ├── _index.tsx
│ │ │ ├── client.a.b.tsx
│ │ │ ├── client.a.tsx
│ │ │ ├── server.a.b.tsx
│ │ │ └── server.a.tsx
│ ├── dev-server.ts
│ ├── package.json
│ ├── public
│ │ └── favicon.ico
│ ├── react-router.config.ts
│ ├── server.ts
│ ├── tsconfig.json
│ ├── tsconfig.node.json
│ ├── tsconfig.vite.json
│ └── vite.config.ts
├── split-route-modules-spa
│ ├── .gitignore
│ ├── app
│ │ ├── root.tsx
│ │ ├── routes.ts
│ │ └── routes
│ │ │ ├── _index.tsx
│ │ │ ├── semi-splittable.tsx
│ │ │ ├── splittable.tsx
│ │ │ └── unsplittable.tsx
│ ├── package.json
│ ├── public
│ │ └── favicon.ico
│ ├── react-router.config.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── split-route-modules
│ ├── .gitignore
│ ├── app
│ │ ├── root.tsx
│ │ ├── routes.ts
│ │ └── routes
│ │ │ ├── _index.tsx
│ │ │ ├── semi-splittable.tsx
│ │ │ ├── splittable.tsx
│ │ │ └── unsplittable.tsx
│ ├── package.json
│ ├── public
│ │ └── favicon.ico
│ ├── react-router.config.ts
│ ├── tsconfig.json
│ └── vite.config.ts
└── vite-plugin-cloudflare
│ ├── .gitignore
│ ├── app
│ ├── entry.server.tsx
│ ├── root.tsx
│ ├── routes.ts
│ └── routes
│ │ └── _index.tsx
│ ├── package.json
│ ├── public
│ └── favicon.ico
│ ├── react-router.config.ts
│ ├── tsconfig.cloudflare.json
│ ├── tsconfig.json
│ ├── tsconfig.node.json
│ ├── vite.config.ts
│ ├── workers
│ └── app.ts
│ └── wrangler.toml
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── prettier.config.js
├── scripts
├── clean-v6-artifacts.sh
├── close-feature-pr.md
├── close-no-repro-issue.md
├── close-no-repro-issues.md
├── close-no-repro-issues.ts
├── constants.js
├── find-release-from-changeset.js
├── finish-stable-release.sh
├── playground.js
├── publish.js
├── remove-prerelease-changelogs.mjs
├── start-prerelease.sh
├── utils.js
└── version.js
├── static
└── base-branch.png
├── tutorials
└── address-book
│ ├── .gitignore
│ ├── README.md
│ ├── app
│ ├── app.css
│ ├── data.ts
│ ├── root.tsx
│ └── routes.ts
│ ├── package.json
│ ├── public
│ └── favicon.ico
│ ├── react-router.config.ts
│ ├── tsconfig.json
│ └── vite.config.ts
└── typedoc.json
/.browserslistrc:
--------------------------------------------------------------------------------
1 | # Browsers we support
2 | Chrome >= 73
3 | ChromeAndroid >= 75
4 | Firefox >= 67
5 | Edge >= 17
6 | Safari >= 12.1
7 | iOS >= 11.3
8 |
--------------------------------------------------------------------------------
/.changeset/README.md:
--------------------------------------------------------------------------------
1 | # Changesets
2 |
3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
4 | with multi-package repos, or single-package repos to help you version and publish your code. You can
5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets)
6 |
7 | We have a quick list of common questions to get you started engaging with this project in
8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
9 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | /fixtures/
2 | node_modules/
3 | pnpm-lock.yaml
4 | /docs/api
5 | examples/**/dist/
6 | worker-configuration.d.ts
7 | /playground/
8 | /playground-local/
9 | packages/**/dist/
10 | packages/react-router-dom/server.d.ts
11 | packages/react-router-dom/server.js
12 | packages/react-router-dom/server.mjs
13 | tutorial/dist/
14 | public/
15 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["react-app"],
3 | "rules": {
4 | "import/first": "off",
5 | "@typescript-eslint/consistent-type-imports": "error"
6 | },
7 | "overrides": [
8 | {
9 | "files": ["**/__tests__/**"],
10 | "plugins": ["jest"],
11 | "extends": ["plugin:jest/recommended"]
12 | },
13 | {
14 | "files": ["integration/**/*.*"],
15 | "rules": {
16 | "react-hooks/rules-of-hooks": "off"
17 | },
18 | "env": {
19 | "jest/globals": false
20 | }
21 | }
22 | ],
23 | "reportUnusedDisableDirectives": true
24 | }
25 |
--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 | - package-ecosystem: github-actions
4 | directory: /
5 | schedule:
6 | interval: daily
7 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | ignore-workspace-cycles=true
2 | enable-pre-post-scripts=true
3 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 20
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "typescript.tsdk": "node_modules/typescript/lib",
3 | "typescript.enablePromptUseWorkspaceTsdk": true
4 | }
5 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | Please see [our guide to contributing](docs/community/contributing.md).
2 |
--------------------------------------------------------------------------------
/build.utils.ts:
--------------------------------------------------------------------------------
1 | export function createBanner(packageName: string, version: string) {
2 | return `/**
3 | * ${packageName} v${version}
4 | *
5 | * Copyright (c) Remix Software Inc.
6 | *
7 | * This source code is licensed under the MIT license found in the
8 | * LICENSE.md file in the root directory of this source tree.
9 | *
10 | * @license MIT
11 | */`;
12 | }
13 |
--------------------------------------------------------------------------------
/decisions/template.md:
--------------------------------------------------------------------------------
1 | # Title
2 |
3 | Date: YYYY-MM-DD
4 |
5 | Status: proposed | rejected | accepted | deprecated | … | superseded by [0005](0005-example.md)
6 |
7 | ## Context
8 |
9 | ## Decision
10 |
11 | ## Consequences
12 |
--------------------------------------------------------------------------------
/docs/api/components/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Components
3 | order: 1
4 | ---
5 |
--------------------------------------------------------------------------------
/docs/api/data-routers/HydratedRouter.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: HydratedRouter
3 | ---
4 |
5 | # HydratedRouter
6 |
7 | [MODES: data]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.HydratedRouter.html)
12 |
13 | Hydrates a server rendered StaticRouterProvider.
14 |
15 | ## Props
16 |
17 | None
18 |
--------------------------------------------------------------------------------
/docs/api/data-routers/createBrowserRouter.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: createBrowserRouter
3 | ---
4 |
5 | # createBrowserRouter
6 |
7 | [MODES: data]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.createBrowserRouter.html)
12 |
13 | ## Signature
14 |
15 | ```tsx
16 | createBrowserRouter(routes, opts): DataRouter
17 | ```
18 |
19 | ## Params
20 |
21 | ### routes
22 |
23 | [modes: data]
24 |
25 | _No documentation_
26 |
27 | ### opts
28 |
29 | [modes: data]
30 |
31 | _No documentation_
32 |
--------------------------------------------------------------------------------
/docs/api/data-routers/createHashRouter.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: createHashRouter
3 | ---
4 |
5 | # createHashRouter
6 |
7 | [MODES: data]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.createHashRouter.html)
12 |
13 | ## Signature
14 |
15 | ```tsx
16 | createHashRouter(routes, opts): DataRouter
17 | ```
18 |
19 | ## Params
20 |
21 | ### routes
22 |
23 | [modes: data]
24 |
25 | _No documentation_
26 |
27 | ### opts
28 |
29 | [modes: data]
30 |
31 | _No documentation_
32 |
--------------------------------------------------------------------------------
/docs/api/data-routers/createMemoryRouter.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: createMemoryRouter
3 | ---
4 |
5 | # createMemoryRouter
6 |
7 | [MODES: data]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.createMemoryRouter.html)
12 |
13 | ## Signature
14 |
15 | ```tsx
16 | createMemoryRouter(routes, opts): DataRouter
17 | ```
18 |
19 | ## Params
20 |
21 | ### routes
22 |
23 | [modes: data]
24 |
25 | _No documentation_
26 |
27 | ### opts
28 |
29 | [modes: data]
30 |
31 | _No documentation_
32 |
--------------------------------------------------------------------------------
/docs/api/data-routers/createStaticRouter.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: createStaticRouter
3 | ---
4 |
5 | # createStaticRouter
6 |
7 | [MODES: data]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.createStaticRouter.html)
12 |
13 | ## Signature
14 |
15 | ```tsx
16 | createStaticRouter(routes, context, opts): DataRouter
17 | ```
18 |
19 | ## Params
20 |
21 | ### routes
22 |
23 | [modes: data]
24 |
25 | _No documentation_
26 |
27 | ### context
28 |
29 | [modes: data]
30 |
31 | _No documentation_
32 |
33 | ### opts
34 |
35 | [modes: data]
36 |
37 | _No documentation_
38 |
--------------------------------------------------------------------------------
/docs/api/data-routers/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Data Routers
3 | order: 4
4 | ---
5 |
--------------------------------------------------------------------------------
/docs/api/declarative-routers/BrowserRouter.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: BrowserRouter
3 | ---
4 |
5 | # BrowserRouter
6 |
7 | [MODES: declarative]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.BrowserRouter.html)
12 |
13 | A declarative router using the browser history API for client side routing.
14 |
15 | ## Props
16 |
17 | ### basename
18 |
19 | [modes: declarative]
20 |
21 | _No documentation_
22 |
23 | ### children
24 |
25 | [modes: declarative]
26 |
27 | _No documentation_
28 |
29 | ### window
30 |
31 | [modes: declarative]
32 |
33 | _No documentation_
34 |
--------------------------------------------------------------------------------
/docs/api/declarative-routers/HashRouter.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: HashRouter
3 | ---
4 |
5 | # HashRouter
6 |
7 | [MODES: declarative]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.HashRouter.html)
12 |
13 | A `<Router>` for use in web browsers. Stores the location in the hash
14 | portion of the URL.
15 |
16 | ## Props
17 |
18 | ### basename
19 |
20 | [modes: declarative]
21 |
22 | _No documentation_
23 |
24 | ### children
25 |
26 | [modes: declarative]
27 |
28 | _No documentation_
29 |
30 | ### window
31 |
32 | [modes: declarative]
33 |
34 | _No documentation_
35 |
--------------------------------------------------------------------------------
/docs/api/declarative-routers/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Declarative Routers
3 | order: 5
4 | ---
5 |
--------------------------------------------------------------------------------
/docs/api/framework-conventions/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Framework Conventions
3 | order: 3
4 | ---
5 |
--------------------------------------------------------------------------------
/docs/api/hooks/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Hooks
3 | order: 2
4 | ---
5 |
--------------------------------------------------------------------------------
/docs/api/hooks/useAsyncValue.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: useAsyncValue
3 | ---
4 |
5 | # useAsyncValue
6 |
7 | [MODES: framework]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.useAsyncValue.html)
12 |
13 | Returns the resolved promise value from the closest [Await](../components/Await).
14 |
15 | ```tsx
16 | function SomeDescendant() {
17 | const value = useAsyncValue();
18 | // ...
19 | }
20 |
21 | // somewhere in your app
22 | <Await resolve={somePromise}>
23 | <SomeDescendant />
24 | </Await>;
25 | ```
26 |
27 | ## Signature
28 |
29 | ```tsx
30 | useAsyncValue(): unknown
31 | ```
32 |
--------------------------------------------------------------------------------
/docs/api/hooks/useInRouterContext.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: useInRouterContext
3 | ---
4 |
5 | # useInRouterContext
6 |
7 | [MODES: framework, data]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.useInRouterContext.html)
12 |
13 | Returns true if this component is a descendant of a Router, useful to ensure
14 | a component is used within a Router.
15 |
16 | ## Signature
17 |
18 | ```tsx
19 | useInRouterContext(): boolean
20 | ```
21 |
--------------------------------------------------------------------------------
/docs/api/hooks/useMatch.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: useMatch
3 | ---
4 |
5 | # useMatch
6 |
7 | [MODES: framework, data, declarative]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.useMatch.html)
12 |
13 | Returns a PathMatch object if the given pattern matches the current URL.
14 | This is useful for components that need to know "active" state, e.g.
15 | `<NavLink>`.
16 |
17 |
18 |
19 | ## Signature
20 |
21 | ```tsx
22 | useMatch(pattern): undefined
23 | ```
24 |
25 | ## Params
26 |
27 | ### pattern
28 |
29 | [modes: framework, data, declarative]
30 |
31 | _No documentation_
32 |
33 |
--------------------------------------------------------------------------------
/docs/api/hooks/useMatches.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: useMatches
3 | ---
4 |
5 | # useMatches
6 |
7 | [MODES: framework, data]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.useMatches.html)
12 |
13 | Returns the active route matches, useful for accessing loaderData for
14 | parent/child routes or the route "handle" property
15 |
16 | ## Signature
17 |
18 | ```tsx
19 | useMatches(): undefined
20 | ```
21 |
--------------------------------------------------------------------------------
/docs/api/hooks/useNavigationType.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: useNavigationType
3 | ---
4 |
5 | # useNavigationType
6 |
7 | [MODES: framework, data, declarative]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.useNavigationType.html)
12 |
13 | Returns the current navigation action which describes how the router came to
14 | the current location, either by a pop, push, or replace on the history stack.
15 |
16 |
17 |
18 | ## Signature
19 |
20 | ```tsx
21 | useNavigationType(): NavigationType
22 | ```
23 |
24 |
--------------------------------------------------------------------------------
/docs/api/hooks/useOutlet.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: useOutlet
3 | ---
4 |
5 | # useOutlet
6 |
7 | [MODES: framework, data, declarative]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.useOutlet.html)
12 |
13 | Returns the element for the child route at this level of the route
14 | hierarchy. Used internally by `<Outlet>` to render child routes.
15 |
16 | ## Signature
17 |
18 | ```tsx
19 | useOutlet(context): undefined
20 | ```
21 |
22 | ## Params
23 |
24 | ### context
25 |
26 | [modes: framework, data, declarative]
27 |
28 | _No documentation_
29 |
--------------------------------------------------------------------------------
/docs/api/hooks/useOutletContext.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: useOutletContext
3 | ---
4 |
5 | # useOutletContext
6 |
7 | [MODES: framework, data, declarative]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.useOutletContext.html)
12 |
13 | Returns the parent route `<Outlet context>`.
14 |
15 |
16 |
17 | ## Signature
18 |
19 | ```tsx
20 | useOutletContext(): Context
21 | ```
22 |
23 |
--------------------------------------------------------------------------------
/docs/api/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: API
3 | order: 3
4 | ---
5 |
--------------------------------------------------------------------------------
/docs/api/utils/IsCookieFunction.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: IsCookieFunction
3 | ---
4 |
5 | # IsCookieFunction
6 |
7 | [MODES: framework, data]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.IsCookieFunction.html)
12 |
--------------------------------------------------------------------------------
/docs/api/utils/IsSessionFunction.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: IsSessionFunction
3 | ---
4 |
5 | # IsSessionFunction
6 |
7 | [MODES: framework, data]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.IsSessionFunction.html)
12 |
--------------------------------------------------------------------------------
/docs/api/utils/Location.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Location
3 | hidden: true
4 | ---
5 |
6 | # Location
7 |
8 | [MODES: framework, data, declarative]
9 |
10 | ## Summary
11 |
12 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.Location.html)
13 |
14 | An entry in a history stack. A location contains information about the
15 | URL path, as well as possibly some arbitrary state and a key.
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/docs/api/utils/createCookie.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: createCookie
3 | ---
4 |
5 | # createCookie
6 |
7 | [MODES: framework, data]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.createCookie.html)
12 |
13 | Creates a logical container for managing a browser cookie from the server.
14 |
--------------------------------------------------------------------------------
/docs/api/utils/createMemorySessionStorage.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: createMemorySessionStorage
3 | ---
4 |
5 | # createMemorySessionStorage
6 |
7 | [MODES: framework, data]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.createMemorySessionStorage.html)
12 |
13 | Creates and returns a simple in-memory SessionStorage object, mostly useful
14 | for testing and as a reference implementation.
15 |
16 | Note: This storage does not scale beyond a single process, so it is not
17 | suitable for most production scenarios.
18 |
--------------------------------------------------------------------------------
/docs/api/utils/createPath.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: createPath
3 | ---
4 |
5 | # createPath
6 |
7 | [MODES: framework, data, declarative]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.createPath.html)
12 |
13 | Creates a string URL path from the given pathname, search, and hash components.
14 |
15 |
16 |
17 | ## Signature
18 |
19 | ```tsx
20 | createPath(__namedParameters): string
21 | ```
22 |
23 | ## Params
24 |
25 | ### __namedParameters
26 |
27 | [modes: framework, data, declarative]
28 |
29 | _No documentation_
30 |
31 |
--------------------------------------------------------------------------------
/docs/api/utils/createRequestHandler.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: createRequestHandler
3 | hidden: true
4 | ---
5 |
6 | # createRequestHandler
7 |
8 | [MODES: framework, data, declarative]
9 |
10 | ## Summary
11 |
12 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.createRequestHandler.html)
13 |
14 |
--------------------------------------------------------------------------------
/docs/api/utils/createRoutesStub.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: createRoutesStub
3 | ---
4 |
5 | # createRoutesStub
6 |
7 | [MODES: framework, data]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.createRoutesStub.html)
12 |
13 | ## Signature
14 |
15 | ```tsx
16 | createRoutesStub(routes, context): undefined
17 | ```
18 |
19 | ## Params
20 |
21 | ### routes
22 |
23 | [modes: framework, data]
24 |
25 | _No documentation_
26 |
27 | ### context
28 |
29 | [modes: framework, data]
30 |
31 | _No documentation_
32 |
--------------------------------------------------------------------------------
/docs/api/utils/createSession.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: createSession
3 | hidden: true
4 | ---
5 |
6 | # createSession
7 |
8 | [MODES: framework, data, declarative]
9 |
10 | ## Summary
11 |
12 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.createSession.html)
13 |
14 | Creates a new Session object.
15 |
16 | Note: This function is typically not invoked directly by application code.
17 | Instead, use a `SessionStorage` object's `getSession` method.
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/docs/api/utils/createSessionStorage.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: createSessionStorage
3 | hidden: true
4 | ---
5 |
6 | # createSessionStorage
7 |
8 | [MODES: framework, data, declarative]
9 |
10 | ## Summary
11 |
12 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.createSessionStorage.html)
13 |
14 | Creates a SessionStorage object using a SessionIdStorageStrategy.
15 |
16 | Note: This is a low-level API that should only be used if none of the
17 | existing session storage options meet your requirements.
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/docs/api/utils/createStaticHandler.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: createStaticHandler
3 | ---
4 |
5 | # createStaticHandler
6 |
7 | [MODES: data]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.createStaticHandler.html)
12 |
13 | ## Signature
14 |
15 | ```tsx
16 | createStaticHandler(routes, opts): StaticHandler
17 | ```
18 |
19 | ## Params
20 |
21 | ### routes
22 |
23 | [modes: data]
24 |
25 | _No documentation_
26 |
27 | ### opts
28 |
29 | [modes: data]
30 |
31 | _No documentation_
32 |
--------------------------------------------------------------------------------
/docs/api/utils/generatePath.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: generatePath
3 | ---
4 |
5 | # generatePath
6 |
7 | [MODES: framework, data, declarative]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.generatePath.html)
12 |
13 | Returns a path with params interpolated.
14 |
15 | ## Signature
16 |
17 | ```tsx
18 | generatePath(originalPath, params): string
19 | ```
20 |
21 | ## Params
22 |
23 | ### originalPath
24 |
25 | [modes: framework, data, declarative]
26 |
27 | _No documentation_
28 |
29 | ### params
30 |
31 | [modes: framework, data, declarative]
32 |
33 | _No documentation_
34 |
--------------------------------------------------------------------------------
/docs/api/utils/href.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: href
3 | ---
4 |
5 | # href
6 |
7 | [MODES: framework]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.href.html)
12 |
13 | Returns a resolved URL path for the specified route.
14 |
15 | ```tsx
16 | const h = href("/:lang?/about", { lang: "en" })
17 | // -> `/en/about`
18 |
19 | <Link to={href("/products/:id", { id: "abc123" })} />
20 | ```
21 |
--------------------------------------------------------------------------------
/docs/api/utils/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Utils
3 | ---
4 |
5 |
--------------------------------------------------------------------------------
/docs/api/utils/isCookie.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: isCookie
3 | ---
4 |
5 | # isCookie
6 |
7 | [MODES: framework, data]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.isCookie.html)
12 |
13 | Returns true if an object is a Remix cookie container.
14 |
--------------------------------------------------------------------------------
/docs/api/utils/isRouteErrorResponse.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: isRouteErrorResponse
3 | ---
4 |
5 | # isRouteErrorResponse
6 |
7 | [MODES: framework, data]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.isRouteErrorResponse.html)
12 |
13 | Check if the given error is an ErrorResponse generated from a 4xx/5xx
14 | Response thrown from an action/loader
15 |
16 | ## Signature
17 |
18 | ```tsx
19 | isRouteErrorResponse(error): error
20 | ```
21 |
22 | ## Params
23 |
24 | ### error
25 |
26 | [modes: framework, data]
27 |
28 | _No documentation_
29 |
--------------------------------------------------------------------------------
/docs/api/utils/isSession.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: isSession
3 | ---
4 |
5 | # isSession
6 |
7 | [MODES: framework, data]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.isSession.html)
12 |
13 | Returns true if an object is a React Router session.
14 |
--------------------------------------------------------------------------------
/docs/api/utils/parsePath.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: parsePath
3 | ---
4 |
5 | # parsePath
6 |
7 | [MODES: framework, data, declarative]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.parsePath.html)
12 |
13 | Parses a string URL path into its separate pathname, search, and hash components.
14 |
15 | ## Signature
16 |
17 | ```tsx
18 | parsePath(path): Partial
19 | ```
20 |
21 | ## Params
22 |
23 | ### path
24 |
25 | [modes: framework, data, declarative]
26 |
27 | _No documentation_
28 |
--------------------------------------------------------------------------------
/docs/api/utils/redirect.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: redirect
3 | ---
4 |
5 | # redirect
6 |
7 | [MODES: framework, data]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.redirect.html)
12 |
13 | A redirect response. Sets the status code and the `Location` header.
14 | Defaults to "302 Found".
15 |
16 | ## Signature
17 |
18 | ```tsx
19 | redirect(url, init): Response
20 | ```
21 |
22 | ## Params
23 |
24 | ### url
25 |
26 | [modes: framework, data]
27 |
28 | _No documentation_
29 |
30 | ### init
31 |
32 | [modes: framework, data]
33 |
34 | _No documentation_
35 |
--------------------------------------------------------------------------------
/docs/api/utils/renderMatches.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: renderMatches
3 | ---
4 |
5 | # renderMatches
6 |
7 | [MODES: framework, data, declarative]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.renderMatches.html)
12 |
13 | Renders the result of `matchRoutes()` into a React element.
14 |
15 | ## Signature
16 |
17 | ```tsx
18 | renderMatches(matches): undefined
19 | ```
20 |
21 | ## Params
22 |
23 | ### matches
24 |
25 | [modes: framework, data, declarative]
26 |
27 | _No documentation_
28 |
--------------------------------------------------------------------------------
/docs/api/utils/resolvePath.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: resolvePath
3 | ---
4 |
5 | # resolvePath
6 |
7 | [MODES: framework, data, declarative]
8 |
9 | ## Summary
10 |
11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.resolvePath.html)
12 |
13 | Returns a resolved path object relative to the given pathname.
14 |
15 | ## Signature
16 |
17 | ```tsx
18 | resolvePath(to, fromPathname): Path
19 | ```
20 |
21 | ## Params
22 |
23 | ### to
24 |
25 | [modes: framework, data, declarative]
26 |
27 | _No documentation_
28 |
29 | ### fromPathname
30 |
31 | [modes: framework, data, declarative]
32 |
33 | _No documentation_
34 |
--------------------------------------------------------------------------------
/docs/community/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Community
3 | order: 6
4 | ---
5 |
--------------------------------------------------------------------------------
/docs/explanation/README:
--------------------------------------------------------------------------------
1 | Explanations:
2 |
3 | - Theoretical Knowledge
4 | - Understanding Oriented
5 | - Useful when we're studying
6 |
--------------------------------------------------------------------------------
/docs/explanation/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Explanations
3 | order: 5
4 | ---
5 |
--------------------------------------------------------------------------------
/docs/explanation/location.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Location Object
3 | hidden: true
4 | ---
5 |
6 | <!-- put some stuff about what it is and how it can be used, probably good opportunity for a couple how-tos as well with scroll restoration, etc -->
7 |
--------------------------------------------------------------------------------
/docs/explanation/route-matching.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Route Matching
3 | hidden: true
4 | # want to explain how the matching algorithm works with any potential gotchas
5 | ---
6 |
7 | # Route Matching
8 |
--------------------------------------------------------------------------------
/docs/explanation/server-client-execution.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Server vs. Client Code Execution
3 | hidden: true
4 | ---
5 |
--------------------------------------------------------------------------------
/docs/how-to/README:
--------------------------------------------------------------------------------
1 | How-To:
2 |
3 | - Practical Steps
4 | - Problem Oriented
5 | - Useful when we're coding
6 |
--------------------------------------------------------------------------------
/docs/how-to/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: How-Tos
3 | order: 4
4 | ---
5 |
--------------------------------------------------------------------------------
/docs/how-to/search-params.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Using Search Params
3 | hidden: true
4 | ---
5 |
--------------------------------------------------------------------------------
/docs/prettier.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @type {import('prettier').Options}
3 | */
4 | module.exports = {
5 | ...require("../prettier.config"),
6 | printWidth: 60,
7 | };
8 |
--------------------------------------------------------------------------------
/docs/start/README:
--------------------------------------------------------------------------------
1 | Get them off the ground and acquainted with basics. Docs here are a mix of:
2 |
3 | How-To:
4 |
5 | - Practical Steps
6 | - Problem Oriented
7 | - Useful when we're coding
8 |
9 | Explanation:
10 |
11 | - Theoretical Knowledge
12 | - Understanding Oriented
13 | - Useful when we're studying
14 |
--------------------------------------------------------------------------------
/docs/start/data/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Data Mode
3 | order: 3
4 | ---
5 |
--------------------------------------------------------------------------------
/docs/start/data/navigating.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Navigating
3 | order: 6
4 | ---
5 |
6 | # Navigating
7 |
8 | Navigating in Data Mode is the same as Framework Mode, please see the [Navigating](../framework/navigating) guide for more information.
9 |
10 | ---
11 |
12 | Next: [Pending UI](./pending-ui)
13 |
--------------------------------------------------------------------------------
/docs/start/data/pending-ui.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Pending UI
3 | order: 7
4 | ---
5 |
6 | # Pending UI
7 |
8 | Pending UI is the same as Framework Mode, please see the [Pending UI](../framework/pending-ui) guide for more information.
9 |
10 | ---
11 |
12 | Next: [Custom Framework](./custom)
13 |
--------------------------------------------------------------------------------
/docs/start/data/testing.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Testing
3 | order: 9
4 | ---
5 |
6 | # Testing
7 |
8 | You can use `createRoutesStub` in data and framework modes. Please refer to the [Testing Guide](../framework/testing).
9 |
--------------------------------------------------------------------------------
/docs/start/declarative/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Declarative Mode
3 | order: 4
4 | ---
5 |
--------------------------------------------------------------------------------
/docs/start/framework/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Framework Mode
3 | order: 2
4 | ---
5 |
--------------------------------------------------------------------------------
/docs/start/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Getting Started
3 | order: 1
4 | ---
5 |
--------------------------------------------------------------------------------
/docs/tutorials/README:
--------------------------------------------------------------------------------
1 | Tutorials:
2 |
3 | - Practical Steps
4 | - Learning Oriented
5 | - Useful when we're studying
6 |
--------------------------------------------------------------------------------
/docs/tutorials/advanced-data-fetching.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Advanced Data Fetching
3 | hidden: true
4 | ---
5 |
6 | # Advanced Data Fetching
7 |
8 | <docs-warning>
9 | This document is a work in progress. There's not much to see here (yet).
10 | </docs-warning>
11 |
--------------------------------------------------------------------------------
/docs/tutorials/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Tutorials
3 | order: 3
4 | ---
5 |
--------------------------------------------------------------------------------
/docs/upgrading/README:
--------------------------------------------------------------------------------
1 | How-To:
2 |
3 | - Practical Steps
4 | - Problem Oriented
5 | - Useful when we're coding
6 |
--------------------------------------------------------------------------------
/docs/upgrading/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Upgrading
3 | order: 2
4 | ---
5 |
--------------------------------------------------------------------------------
/examples/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Examples
3 | order: 6
4 | ---
5 |
6 | # React Router Examples
7 |
8 | Welcome to the examples for React Router.
9 |
10 | Here you'll find various examples of using React Router to accomplish certain tasks. Each example is a complete application including a build and even a button to preview a live instance of the app so you can play with it. You'll most often be interested in checking out the code in `src/App.tsx` (or `src/App.js`), but we included the entire source code for the app for completeness.
11 |
12 | Also, remember to check out the README!
13 |
14 | Enjoy!
15 |
--------------------------------------------------------------------------------
/examples/auth-router-provider/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/examples/auth-router-provider/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/auth-router-provider/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <title>React Router - Auth Example</title>
7 | </head>
8 | <body>
9 | <div id="root"></div>
10 | <script type="module" src="/src/main.tsx"></script>
11 | </body>
12 | </html>
13 |
--------------------------------------------------------------------------------
/examples/auth-router-provider/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "auth",
3 | "private": true,
4 | "scripts": {
5 | "dev": "vite",
6 | "build": "tsc && vite build",
7 | "serve": "vite preview"
8 | },
9 | "dependencies": {
10 | "react": "^18.2.0",
11 | "react-dom": "^18.2.0",
12 | "react-router-dom": "^6.15.0"
13 | },
14 | "devDependencies": {
15 | "@rollup/plugin-replace": "^5.0.2",
16 | "@types/node": "^18.11.18",
17 | "@types/react": "^18.0.27",
18 | "@types/react-dom": "^18.0.10",
19 | "@vitejs/plugin-react": "^3.0.1",
20 | "typescript": "^4.9.5",
21 | "vite": "^4.0.4"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/examples/auth-router-provider/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
3 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
4 | sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | }
8 |
9 | code {
10 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
11 | monospace;
12 | }
13 |
--------------------------------------------------------------------------------
/examples/auth-router-provider/src/main.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom/client";
3 |
4 | import "./index.css";
5 | import App from "./App";
6 |
7 | ReactDOM.createRoot(document.getElementById("root")!).render(
8 | <React.StrictMode>
9 | <App />
10 | </React.StrictMode>
11 | );
12 |
--------------------------------------------------------------------------------
/examples/auth-router-provider/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |
--------------------------------------------------------------------------------
/examples/auth-router-provider/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "verbatimModuleSyntax": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 | "importsNotUsedAsValues": "error"
18 | },
19 | "include": ["./src"]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/auth/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/examples/auth/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/auth/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <title>React Router - Auth Example</title>
7 | </head>
8 | <body>
9 | <div id="root"></div>
10 | <script type="module" src="/src/main.tsx"></script>
11 | </body>
12 | </html>
13 |
--------------------------------------------------------------------------------
/examples/auth/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "auth",
3 | "private": true,
4 | "scripts": {
5 | "dev": "vite",
6 | "build": "tsc && vite build",
7 | "serve": "vite preview"
8 | },
9 | "dependencies": {
10 | "react": "^18.2.0",
11 | "react-dom": "^18.2.0",
12 | "react-router-dom": "^6.15.0"
13 | },
14 | "devDependencies": {
15 | "@rollup/plugin-replace": "^5.0.2",
16 | "@types/node": "^18.11.18",
17 | "@types/react": "^18.0.27",
18 | "@types/react-dom": "^18.0.10",
19 | "@vitejs/plugin-react": "^3.0.1",
20 | "typescript": "^4.9.5",
21 | "vite": "^4.0.4"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/examples/auth/src/auth.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This represents some generic auth provider API, like Firebase.
3 | */
4 | const fakeAuthProvider = {
5 | isAuthenticated: false,
6 | signin(callback: VoidFunction) {
7 | fakeAuthProvider.isAuthenticated = true;
8 | setTimeout(callback, 100); // fake async
9 | },
10 | signout(callback: VoidFunction) {
11 | fakeAuthProvider.isAuthenticated = false;
12 | setTimeout(callback, 100);
13 | },
14 | };
15 |
16 | export { fakeAuthProvider };
17 |
--------------------------------------------------------------------------------
/examples/auth/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
3 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
4 | sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | }
8 |
9 | code {
10 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
11 | monospace;
12 | }
13 |
--------------------------------------------------------------------------------
/examples/auth/src/main.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom/client";
3 | import { BrowserRouter } from "react-router-dom";
4 |
5 | import "./index.css";
6 | import App from "./App";
7 |
8 | ReactDOM.createRoot(document.getElementById("root")!).render(
9 | <React.StrictMode>
10 | <BrowserRouter>
11 | <App />
12 | </BrowserRouter>
13 | </React.StrictMode>
14 | );
15 |
--------------------------------------------------------------------------------
/examples/auth/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |
--------------------------------------------------------------------------------
/examples/auth/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "verbatimModuleSyntax": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 | "importsNotUsedAsValues": "error"
18 | },
19 | "include": ["./src"]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/basic-data-router/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/examples/basic-data-router/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/basic-data-router/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Basic (Data Router)
3 | toc: false
4 | order: 1
5 | ---
6 |
7 | # Data Routers
8 |
9 | This example demonstrates a simple usage of a Data Router, using `createBrowserRouter` and `<RouterProvider>`.
10 |
11 | ## Preview
12 |
13 | Open this example on [StackBlitz](https://stackblitz.com):
14 |
15 | [](https://stackblitz.com/github/remix-run/react-router/tree/main/examples/basic-data-router?file=src/App.tsx)
16 |
--------------------------------------------------------------------------------
/examples/basic-data-router/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <title>React Router - Basic Data Router Example</title>
7 | </head>
8 | <body>
9 | <div id="root"></div>
10 | <script type="module" src="/src/main.tsx"></script>
11 | </body>
12 | </html>
13 |
--------------------------------------------------------------------------------
/examples/basic-data-router/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "basic-data-router",
3 | "private": true,
4 | "scripts": {
5 | "dev": "vite",
6 | "build": "tsc && vite build",
7 | "serve": "vite preview"
8 | },
9 | "dependencies": {
10 | "react": "18.2.0",
11 | "react-dom": "18.2.0",
12 | "react-router-dom": "^6.15.0"
13 | },
14 | "devDependencies": {
15 | "@rollup/plugin-replace": "5.0.2",
16 | "@types/node": "18.11.18",
17 | "@types/react": "18.0.27",
18 | "@types/react-dom": "18.0.10",
19 | "@vitejs/plugin-react": "3.0.1",
20 | "typescript": "4.9.5",
21 | "vite": "4.0.4"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/examples/basic-data-router/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
3 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
4 | sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | }
8 |
9 | code {
10 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
11 | monospace;
12 | }
13 |
--------------------------------------------------------------------------------
/examples/basic-data-router/src/main.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom/client";
3 | import App from "./app";
4 |
5 | ReactDOM.createRoot(document.getElementById("root")!).render(
6 | <React.StrictMode>
7 | <App />
8 | </React.StrictMode>
9 | );
10 |
--------------------------------------------------------------------------------
/examples/basic-data-router/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |
--------------------------------------------------------------------------------
/examples/basic-data-router/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "verbatimModuleSyntax": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 | "importsNotUsedAsValues": "error"
18 | },
19 | "include": ["./src"]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/basic/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/examples/basic/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/basic/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <title>React Router - Basic Example</title>
7 | </head>
8 | <body>
9 | <div id="root"></div>
10 | <script type="module" src="/src/main.tsx"></script>
11 | </body>
12 | </html>
13 |
--------------------------------------------------------------------------------
/examples/basic/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "basic",
3 | "private": true,
4 | "scripts": {
5 | "dev": "vite",
6 | "build": "tsc && vite build",
7 | "serve": "vite preview"
8 | },
9 | "dependencies": {
10 | "react": "^18.2.0",
11 | "react-dom": "^18.2.0",
12 | "react-router-dom": "^6.15.0"
13 | },
14 | "devDependencies": {
15 | "@rollup/plugin-replace": "^5.0.2",
16 | "@types/node": "18.x",
17 | "@types/react": "^18.0.27",
18 | "@types/react-dom": "^18.0.10",
19 | "@vitejs/plugin-react": "^3.0.1",
20 | "typescript": "^4.9.5",
21 | "vite": "^4.0.4"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/examples/basic/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
3 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
4 | sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | }
8 |
9 | code {
10 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
11 | monospace;
12 | }
13 |
--------------------------------------------------------------------------------
/examples/basic/src/main.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom/client";
3 | import { BrowserRouter } from "react-router-dom";
4 |
5 | import "./index.css";
6 | import App from "./App";
7 |
8 | ReactDOM.createRoot(document.getElementById("root")!).render(
9 | <React.StrictMode>
10 | <BrowserRouter>
11 | <App />
12 | </BrowserRouter>
13 | </React.StrictMode>
14 | );
15 |
--------------------------------------------------------------------------------
/examples/basic/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |
--------------------------------------------------------------------------------
/examples/basic/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "verbatimModuleSyntax": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 | "importsNotUsedAsValues": "error"
18 | },
19 | "include": ["./src"]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/custom-filter-link/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/examples/custom-filter-link/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/custom-filter-link/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Custom Filter Link
3 | toc: false
4 | ---
5 |
6 | # Custom Filter Link Example
7 |
8 | This example demonstrates how to use a query string parameter to mark a link as "active" or not. This is a common technique when implementing a filter in a sidebar where you're browsing products.
9 |
10 | ## Preview
11 |
12 | Open this example on [StackBlitz](https://stackblitz.com):
13 |
14 | [](https://stackblitz.com/github/remix-run/react-router/tree/main/examples/custom-filter-link?file=src/App.tsx)
15 |
--------------------------------------------------------------------------------
/examples/custom-filter-link/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <title>React Router - Custom Filter Link Example</title>
7 | </head>
8 | <body>
9 | <div id="root"></div>
10 | <script type="module" src="/src/main.tsx"></script>
11 | </body>
12 | </html>
13 |
--------------------------------------------------------------------------------
/examples/custom-filter-link/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
3 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
4 | sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | }
8 |
9 | code {
10 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
11 | monospace;
12 | }
13 |
--------------------------------------------------------------------------------
/examples/custom-filter-link/src/main.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom/client";
3 | import { BrowserRouter } from "react-router-dom";
4 |
5 | import "./index.css";
6 | import App from "./App";
7 |
8 | ReactDOM.createRoot(document.getElementById("root")).render(
9 | <React.StrictMode>
10 | <BrowserRouter>
11 | <App />
12 | </BrowserRouter>
13 | </React.StrictMode>
14 | );
15 |
--------------------------------------------------------------------------------
/examples/custom-filter-link/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |
--------------------------------------------------------------------------------
/examples/custom-filter-link/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "verbatimModuleSyntax": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 | "importsNotUsedAsValues": "error"
18 | },
19 | "include": ["./src"]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/custom-link/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/examples/custom-link/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/custom-link/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Custom Active Link
3 | toc: false
4 | ---
5 |
6 | # Custom Link Example
7 |
8 | This example demonstrates how to make a custom `<Link>` component to render something different when the link is "active" using the `useMatch()` and `useResolvedPath()` hooks.
9 |
10 | ## Preview
11 |
12 | Open this example on [StackBlitz](https://stackblitz.com):
13 |
14 | [](https://stackblitz.com/github/remix-run/react-router/tree/main/examples/custom-link?file=src/App.tsx)
15 |
--------------------------------------------------------------------------------
/examples/custom-link/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <title>React Router - Custom Link Example</title>
7 | </head>
8 | <body>
9 | <div id="root"></div>
10 | <script type="module" src="/src/main.tsx"></script>
11 | </body>
12 | </html>
13 |
--------------------------------------------------------------------------------
/examples/custom-link/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "custom-link",
3 | "private": true,
4 | "scripts": {
5 | "dev": "vite",
6 | "build": "tsc && vite build",
7 | "serve": "vite preview"
8 | },
9 | "dependencies": {
10 | "react": "^18.2.0",
11 | "react-dom": "^18.2.0",
12 | "react-router-dom": "^6.15.0"
13 | },
14 | "devDependencies": {
15 | "@rollup/plugin-replace": "^5.0.2",
16 | "@types/node": "18.x",
17 | "@types/react": "^18.0.27",
18 | "@types/react-dom": "^18.0.10",
19 | "@vitejs/plugin-react": "^3.0.1",
20 | "typescript": "^4.9.5",
21 | "vite": "^4.0.4"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/examples/custom-link/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
3 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
4 | sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | }
8 |
9 | code {
10 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
11 | monospace;
12 | }
13 |
--------------------------------------------------------------------------------
/examples/custom-link/src/main.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom/client";
3 | import { BrowserRouter } from "react-router-dom";
4 |
5 | import "./index.css";
6 | import App from "./App";
7 |
8 | ReactDOM.createRoot(document.getElementById("root")).render(
9 | <React.StrictMode>
10 | <BrowserRouter>
11 | <App />
12 | </BrowserRouter>
13 | </React.StrictMode>
14 | );
15 |
--------------------------------------------------------------------------------
/examples/custom-link/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |
--------------------------------------------------------------------------------
/examples/custom-link/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "verbatimModuleSyntax": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 | "importsNotUsedAsValues": "error"
18 | },
19 | "include": ["./src"]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/custom-query-parsing/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/examples/custom-query-parsing/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/custom-query-parsing/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <title>React Router - Custom Query Parsing Example</title>
7 | </head>
8 | <body>
9 | <div id="root"></div>
10 | <script type="module" src="/src/main.tsx"></script>
11 | </body>
12 | </html>
13 |
--------------------------------------------------------------------------------
/examples/custom-query-parsing/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
3 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
4 | sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | }
8 |
9 | code {
10 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
11 | monospace;
12 | }
13 |
--------------------------------------------------------------------------------
/examples/custom-query-parsing/src/main.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom/client";
3 | import { BrowserRouter } from "react-router-dom";
4 |
5 | import "./index.css";
6 | import App from "./App";
7 |
8 | ReactDOM.createRoot(document.getElementById("root")).render(
9 | <React.StrictMode>
10 | <BrowserRouter>
11 | <App />
12 | </BrowserRouter>
13 | </React.StrictMode>
14 | );
15 |
--------------------------------------------------------------------------------
/examples/custom-query-parsing/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |
--------------------------------------------------------------------------------
/examples/custom-query-parsing/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "verbatimModuleSyntax": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 | "importsNotUsedAsValues": "error"
18 | },
19 | "include": ["./src", "./types"]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/custom-query-parsing/types/jsurl.d.ts:
--------------------------------------------------------------------------------
1 | declare module "jsurl" {
2 | type Nullable<T> = T | null | undefined;
3 | export function stringify(input: any): string;
4 | export function parse(input?: Nullable<string>): Nullable<any>;
5 | }
6 |
--------------------------------------------------------------------------------
/examples/data-router/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/examples/data-router/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/data-router/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Data Router
3 | toc: false
4 | order: 1
5 | ---
6 |
7 | # Data Routers
8 |
9 | This example demonstrates some of the basic features of Data Router, including:
10 |
11 | - Loader functions
12 | - Action functions
13 | - <Link> and <Form> navigations
14 | - <fetcher.Form> submissions
15 |
16 | ## Preview
17 |
18 | Open this example on [StackBlitz](https://stackblitz.com):
19 |
20 | [](https://stackblitz.com/github/remix-run/react-router/tree/main/examples/data-router?file=src/App.tsx)
21 |
--------------------------------------------------------------------------------
/examples/data-router/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <title>React Router - Basic Example</title>
7 | </head>
8 | <body>
9 | <div id="root"></div>
10 | <script type="module" src="/src/main.tsx"></script>
11 | </body>
12 | </html>
13 |
--------------------------------------------------------------------------------
/examples/data-router/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "data-router",
3 | "private": true,
4 | "scripts": {
5 | "dev": "vite",
6 | "build": "tsc && vite build",
7 | "serve": "vite preview"
8 | },
9 | "dependencies": {
10 | "react": "18.2.0",
11 | "react-dom": "18.2.0",
12 | "react-router-dom": "^6.15.0"
13 | },
14 | "devDependencies": {
15 | "@rollup/plugin-replace": "5.0.2",
16 | "@types/node": "18.11.18",
17 | "@types/react": "18.0.27",
18 | "@types/react-dom": "18.0.10",
19 | "@vitejs/plugin-react": "3.0.1",
20 | "typescript": "4.9.5",
21 | "vite": "4.0.4"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/examples/data-router/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
3 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
4 | sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | }
8 |
9 | code {
10 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
11 | monospace;
12 | }
13 |
--------------------------------------------------------------------------------
/examples/data-router/src/main.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom/client";
3 | import App from "./app";
4 |
5 | ReactDOM.createRoot(document.getElementById("root")).render(
6 | <React.StrictMode>
7 | <App />
8 | </React.StrictMode>
9 | );
10 |
--------------------------------------------------------------------------------
/examples/data-router/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |
--------------------------------------------------------------------------------
/examples/data-router/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "verbatimModuleSyntax": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 | "importsNotUsedAsValues": "error"
18 | },
19 | "include": ["./src"]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/error-boundaries/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/examples/error-boundaries/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/error-boundaries/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <title>React Router - Error Boundaries Example</title>
7 | </head>
8 | <body>
9 | <div id="root"></div>
10 | <script type="module" src="/src/main.tsx"></script>
11 | </body>
12 | </html>
13 |
--------------------------------------------------------------------------------
/examples/error-boundaries/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "error-boundaries",
3 | "private": true,
4 | "scripts": {
5 | "dev": "vite",
6 | "build": "tsc && vite build",
7 | "serve": "vite preview"
8 | },
9 | "dependencies": {
10 | "react": "^18.2.0",
11 | "react-dom": "^18.2.0",
12 | "react-router-dom": "^6.15.0"
13 | },
14 | "devDependencies": {
15 | "@rollup/plugin-replace": "5.0.2",
16 | "@types/node": "18.11.18",
17 | "@types/react": "^18.0.27",
18 | "@types/react-dom": "^18.0.10",
19 | "@vitejs/plugin-react": "3.0.1",
20 | "typescript": "4.9.5",
21 | "vite": "4.0.4"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/examples/error-boundaries/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
3 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
4 | sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | max-width: 600px;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 | monospace;
13 | background-color: #eee;
14 | padding: 1px 3px;
15 | }
16 |
17 | li {
18 | padding: 10px 0;
19 | }
20 |
--------------------------------------------------------------------------------
/examples/error-boundaries/src/main.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom/client";
3 |
4 | import App from "./app";
5 |
6 | ReactDOM.createRoot(document.getElementById("root")).render(
7 | <React.StrictMode>
8 | <App />
9 | </React.StrictMode>
10 | );
11 |
--------------------------------------------------------------------------------
/examples/error-boundaries/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |
--------------------------------------------------------------------------------
/examples/error-boundaries/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "verbatimModuleSyntax": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 | "importsNotUsedAsValues": "error"
18 | },
19 | "include": ["./src"]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/lazy-loading-router-provider/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/examples/lazy-loading-router-provider/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/lazy-loading-router-provider/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <title>React Router - Lazy Loading Example using RouterProvider</title>
7 | </head>
8 | <body>
9 | <div id="root"></div>
10 | <script type="module" src="/src/main.tsx"></script>
11 | </body>
12 | </html>
13 |
--------------------------------------------------------------------------------
/examples/lazy-loading-router-provider/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
3 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
4 | sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | }
8 |
9 | code {
10 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
11 | monospace;
12 | }
13 |
--------------------------------------------------------------------------------
/examples/lazy-loading-router-provider/src/main.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom/client";
3 |
4 | import "./index.css";
5 | import App from "./App";
6 |
7 | ReactDOM.createRoot(document.getElementById("root")).render(
8 | <React.StrictMode>
9 | <App />
10 | </React.StrictMode>
11 | );
12 |
--------------------------------------------------------------------------------
/examples/lazy-loading-router-provider/src/pages/About.tsx:
--------------------------------------------------------------------------------
1 | import { useLoaderData } from "react-router-dom";
2 |
3 | export async function loader() {
4 | await new Promise((r) => setTimeout(r, 500));
5 | return "I came from the About.tsx loader function!";
6 | }
7 |
8 | export function Component() {
9 | let data = useLoaderData() as string;
10 |
11 | return (
12 | <div>
13 | <h2>About</h2>
14 | <p>{data}</p>
15 | </div>
16 | );
17 | }
18 |
19 | Component.displayName = "AboutPage";
20 |
--------------------------------------------------------------------------------
/examples/lazy-loading-router-provider/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |
--------------------------------------------------------------------------------
/examples/lazy-loading-router-provider/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "verbatimModuleSyntax": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 | "importsNotUsedAsValues": "error"
18 | },
19 | "include": ["./src"]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/lazy-loading/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/examples/lazy-loading/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/lazy-loading/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <title>React Router - Lazy Loading Example</title>
7 | </head>
8 | <body>
9 | <div id="root"></div>
10 | <script type="module" src="/src/main.tsx"></script>
11 | </body>
12 | </html>
13 |
--------------------------------------------------------------------------------
/examples/lazy-loading/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "lazy-loading",
3 | "private": true,
4 | "scripts": {
5 | "dev": "vite",
6 | "build": "tsc && vite build",
7 | "serve": "vite preview"
8 | },
9 | "dependencies": {
10 | "react": "^18.2.0",
11 | "react-dom": "^18.2.0",
12 | "react-router-dom": "^6.15.0"
13 | },
14 | "devDependencies": {
15 | "@rollup/plugin-replace": "^5.0.2",
16 | "@types/node": "18.x",
17 | "@types/react": "^18.0.27",
18 | "@types/react-dom": "^18.0.10",
19 | "@vitejs/plugin-react": "^3.0.1",
20 | "typescript": "^4.9.5",
21 | "vite": "^4.0.4"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/examples/lazy-loading/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
3 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
4 | sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | }
8 |
9 | code {
10 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
11 | monospace;
12 | }
13 |
--------------------------------------------------------------------------------
/examples/lazy-loading/src/main.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom/client";
3 | import { BrowserRouter } from "react-router-dom";
4 |
5 | import "./index.css";
6 | import App from "./App";
7 |
8 | ReactDOM.createRoot(document.getElementById("root")).render(
9 | <React.StrictMode>
10 | <BrowserRouter>
11 | <App />
12 | </BrowserRouter>
13 | </React.StrictMode>
14 | );
15 |
--------------------------------------------------------------------------------
/examples/lazy-loading/src/pages/About.tsx:
--------------------------------------------------------------------------------
1 | function AboutPage() {
2 | return (
3 | <div>
4 | <h2>About</h2>
5 | </div>
6 | );
7 | }
8 |
9 | export default AboutPage;
10 |
--------------------------------------------------------------------------------
/examples/lazy-loading/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |
--------------------------------------------------------------------------------
/examples/lazy-loading/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "verbatimModuleSyntax": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 | "importsNotUsedAsValues": "error"
18 | },
19 | "include": ["./src"]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/modal-route-with-outlet/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/examples/modal-route-with-outlet/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/modal-route-with-outlet/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Outlet Modal
3 | toc: false
4 | ---
5 |
6 | # Outlet Modal Example
7 |
8 | ## Preview
9 |
10 | Open this example on [StackBlitz](https://stackblitz.com):
11 |
12 | [](https://stackblitz.com/github/remix-run/react-router/tree/main/examples/modal-route-with-outlet?file=src/App.tsx)
13 |
--------------------------------------------------------------------------------
/examples/modal-route-with-outlet/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <title>React Router - Modal Example</title>
7 | </head>
8 | <body>
9 | <div id="root"></div>
10 | <script type="module" src="/src/main.tsx"></script>
11 | </body>
12 | </html>
13 |
--------------------------------------------------------------------------------
/examples/modal-route-with-outlet/src/main.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import ReactDOM from "react-dom/client";
3 |
4 | import App from "./App";
5 | import "./index.css";
6 |
7 | const root = document.getElementById("root");
8 | if (!root) throw new Error("Root element not found");
9 |
10 | ReactDOM.createRoot(root).render(
11 | <React.StrictMode>
12 | <App />
13 | </React.StrictMode>
14 | );
15 |
--------------------------------------------------------------------------------
/examples/modal-route-with-outlet/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |
--------------------------------------------------------------------------------
/examples/modal-route-with-outlet/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "verbatimModuleSyntax": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 | "importsNotUsedAsValues": "error"
18 | },
19 | "include": ["./src"]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/modal/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/examples/modal/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/modal/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Modal
3 | toc: false
4 | ---
5 |
6 | # Modal Example
7 |
8 | ## Preview
9 |
10 | Open this example on [StackBlitz](https://stackblitz.com):
11 |
12 | [](https://stackblitz.com/github/remix-run/react-router/tree/main/examples/modal?file=src/App.tsx)
13 |
--------------------------------------------------------------------------------
/examples/modal/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <title>React Router - Modal Example</title>
7 | </head>
8 | <body>
9 | <div id="root"></div>
10 | <script type="module" src="/src/main.tsx"></script>
11 | </body>
12 | </html>
13 |
--------------------------------------------------------------------------------
/examples/modal/src/index.css:
--------------------------------------------------------------------------------
1 | html {
2 | box-sizing: border-box;
3 | }
4 |
5 | * {
6 | box-sizing: inherit;
7 | }
8 |
9 | body {
10 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
11 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
12 | sans-serif;
13 | -webkit-font-smoothing: antialiased;
14 | -moz-osx-font-smoothing: grayscale;
15 | }
16 |
17 | code {
18 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
19 | monospace;
20 | }
21 |
22 | [data-reach-dialog-content] {
23 | width: 90%;
24 | max-width: 500px;
25 | border-radius: 8px;
26 | }
27 |
--------------------------------------------------------------------------------
/examples/modal/src/main.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom";
3 | import { BrowserRouter } from "react-router-dom";
4 |
5 | import App from "./App";
6 | import "./index.css";
7 |
8 | ReactDOM.render(
9 | <React.StrictMode>
10 | <BrowserRouter>
11 | <App />
12 | </BrowserRouter>
13 | </React.StrictMode>,
14 | document.getElementById("root")
15 | );
16 |
--------------------------------------------------------------------------------
/examples/modal/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |
--------------------------------------------------------------------------------
/examples/modal/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "verbatimModuleSyntax": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 | "importsNotUsedAsValues": "error"
18 | },
19 | "include": ["./src"]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/multi-app/.gitignore:
--------------------------------------------------------------------------------
1 | public/build
2 |
--------------------------------------------------------------------------------
/examples/multi-app/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/multi-app/home/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
3 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
4 | sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | }
8 |
9 | code {
10 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
11 | monospace;
12 | }
13 |
--------------------------------------------------------------------------------
/examples/multi-app/home/main.jsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom/client";
3 | import { BrowserRouter } from "react-router-dom";
4 |
5 | import HomeApp from "./App";
6 |
7 | ReactDOM.createRoot(document.getElementById("root")).render(
8 | <React.StrictMode>
9 | {/* No basename for this router. This app renders at the root / URL. */}
10 | <BrowserRouter>
11 | <HomeApp />
12 | </BrowserRouter>
13 | </React.StrictMode>
14 | );
15 |
--------------------------------------------------------------------------------
/examples/multi-app/home/no-match.jsx:
--------------------------------------------------------------------------------
1 | import { Link } from "react-router-dom";
2 |
3 | function NoMatch() {
4 | return (
5 | <div>
6 | <h2>Nothing to see here!</h2>
7 | <p>
8 | <Link to="/">Go to the home page of the app</Link>
9 | </p>
10 | </div>
11 | );
12 | }
13 |
14 | export { NoMatch };
15 |
--------------------------------------------------------------------------------
/examples/multi-app/inbox/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
3 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
4 | sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | }
8 |
9 | code {
10 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
11 | monospace;
12 | }
13 |
--------------------------------------------------------------------------------
/examples/multi-app/inbox/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 | <title>React Router - Multi App Example (Inbox App)</title>
8 | </head>
9 | <body>
10 | <div id="root"></div>
11 | <script type="module" src="/inbox/main.jsx"></script>
12 | </body>
13 | </html>
14 |
--------------------------------------------------------------------------------
/examples/multi-app/inbox/main.jsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom/client";
3 | import { BrowserRouter } from "react-router-dom";
4 |
5 | import InboxApp from "./App";
6 |
7 | ReactDOM.createRoot(document.getElementById("root")).render(
8 | <React.StrictMode>
9 | {/* "Mount" this app under the /inbox URL pathname. All routes and links
10 | are relative to this name. */}
11 | <BrowserRouter basename="inbox">
12 | <InboxApp />
13 | </BrowserRouter>
14 | </React.StrictMode>
15 | );
16 |
--------------------------------------------------------------------------------
/examples/multi-app/inbox/no-match.jsx:
--------------------------------------------------------------------------------
1 | import { Link } from "react-router-dom";
2 |
3 | function NoMatch() {
4 | return (
5 | <div>
6 | <h2>Nothing to see here!</h2>
7 | <p>
8 | <Link to="/">Go to the home page of the app</Link>
9 | </p>
10 | </div>
11 | );
12 | }
13 |
14 | export { NoMatch };
15 |
--------------------------------------------------------------------------------
/examples/multi-app/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 | <title>React Router - Multi App Example (Home App)</title>
8 | </head>
9 | <body>
10 | <div id="root"></div>
11 | <script type="module" src="/home/main.jsx"></script>
12 | </body>
13 | </html>
14 |
--------------------------------------------------------------------------------
/examples/navigation-blocking/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/examples/navigation-blocking/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/navigation-blocking/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <title>React Router - Navigation Blocking</title>
7 | </head>
8 | <body>
9 | <div id="root"></div>
10 | <script type="module" src="/src/main.tsx"></script>
11 | </body>
12 | </html>
13 |
--------------------------------------------------------------------------------
/examples/navigation-blocking/src/main.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom/client";
3 | import App from "./app";
4 |
5 | ReactDOM.createRoot(document.getElementById("root")).render(
6 | <React.StrictMode>
7 | <App />
8 | </React.StrictMode>
9 | );
10 |
--------------------------------------------------------------------------------
/examples/navigation-blocking/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |
--------------------------------------------------------------------------------
/examples/navigation-blocking/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "verbatimModuleSyntax": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 | "importsNotUsedAsValues": "error"
18 | },
19 | "include": ["./src"]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/notes/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/examples/notes/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/notes/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Notes CRUD
3 | toc: false
4 | order: 1
5 | ---
6 |
7 | # Data Routers
8 |
9 | This example demonstrates some of the basic features of Data Router, including:
10 |
11 | - Loader functions
12 | - Action functions
13 | - <Link> and <Form> navigations
14 |
15 | ## Preview
16 |
17 | Open this example on [StackBlitz](https://stackblitz.com):
18 |
19 | [](https://stackblitz.com/github/remix-run/react-router/tree/dev/examples/notes?file=src/App.jsx)
20 |
--------------------------------------------------------------------------------
/examples/notes/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <title>React Router - Basic Example</title>
7 | </head>
8 | <body>
9 | <div id="root"></div>
10 | <script type="module" src="/src/main.jsx"></script>
11 | </body>
12 | </html>
13 |
--------------------------------------------------------------------------------
/examples/notes/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
3 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
4 | sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | }
8 |
9 | code {
10 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
11 | monospace;
12 | }
13 |
--------------------------------------------------------------------------------
/examples/notes/src/main.jsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom/client";
3 |
4 | import App from "./app";
5 |
6 | ReactDOM.createRoot(document.getElementById("root")).render(
7 | <React.StrictMode>
8 | <App />
9 | </React.StrictMode>
10 | );
11 |
--------------------------------------------------------------------------------
/examples/notes/src/routes/notes.jsx:
--------------------------------------------------------------------------------
1 | export default function Notes() {
2 | return <div>Notes</div>;
3 | }
4 |
--------------------------------------------------------------------------------
/examples/notes/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |
--------------------------------------------------------------------------------
/examples/notes/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "verbatimModuleSyntax": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 | "importsNotUsedAsValues": "error"
18 | },
19 | "include": ["./src", "../../build/node_modules"]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/route-objects/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/examples/route-objects/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/route-objects/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <title>React Router - Route Objects Example</title>
7 | </head>
8 | <body>
9 | <div id="root"></div>
10 | <script type="module" src="/src/main.tsx"></script>
11 | </body>
12 | </html>
13 |
--------------------------------------------------------------------------------
/examples/route-objects/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "basic",
3 | "private": true,
4 | "scripts": {
5 | "dev": "vite",
6 | "build": "tsc && vite build",
7 | "serve": "vite preview"
8 | },
9 | "dependencies": {
10 | "react": "^18.2.0",
11 | "react-dom": "^18.2.0",
12 | "react-router-dom": "^6.15.0"
13 | },
14 | "devDependencies": {
15 | "@rollup/plugin-replace": "^5.0.2",
16 | "@types/node": "18.x",
17 | "@types/react": "^18.0.27",
18 | "@types/react-dom": "^18.0.10",
19 | "@vitejs/plugin-react": "^3.0.1",
20 | "typescript": "^4.9.5",
21 | "vite": "^4.0.4"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/examples/route-objects/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
3 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
4 | sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | }
8 |
9 | code {
10 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
11 | monospace;
12 | }
13 |
--------------------------------------------------------------------------------
/examples/route-objects/src/main.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom/client";
3 | import { BrowserRouter } from "react-router-dom";
4 |
5 | import "./index.css";
6 | import App from "./App";
7 |
8 | ReactDOM.createRoot(document.getElementById("root")).render(
9 | <React.StrictMode>
10 | <BrowserRouter>
11 | <App />
12 | </BrowserRouter>
13 | </React.StrictMode>
14 | );
15 |
--------------------------------------------------------------------------------
/examples/route-objects/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |
--------------------------------------------------------------------------------
/examples/route-objects/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": false,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "verbatimModuleSyntax": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 | "importsNotUsedAsValues": "error"
18 | },
19 | "include": ["./src"]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/scroll-restoration/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/examples/scroll-restoration/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/scroll-restoration/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <title>React Router - Basic Example</title>
7 | </head>
8 | <body>
9 | <div id="root"></div>
10 | <script type="module" src="/src/main.tsx"></script>
11 | </body>
12 | </html>
13 |
--------------------------------------------------------------------------------
/examples/scroll-restoration/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
3 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
4 | sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | }
8 |
9 | code {
10 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
11 | monospace;
12 | }
13 |
--------------------------------------------------------------------------------
/examples/scroll-restoration/src/main.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom/client";
3 | import App from "./app";
4 |
5 | ReactDOM.createRoot(document.getElementById("root")).render(
6 | <React.StrictMode>
7 | <App />
8 | </React.StrictMode>
9 | );
10 |
--------------------------------------------------------------------------------
/examples/scroll-restoration/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |
--------------------------------------------------------------------------------
/examples/scroll-restoration/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "verbatimModuleSyntax": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 | "importsNotUsedAsValues": "error"
18 | },
19 | "include": ["./src"]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/search-params/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/examples/search-params/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/search-params/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <title>React Router - Search Params Example</title>
7 | </head>
8 | <body>
9 | <div id="root"></div>
10 | <script type="module" src="/src/main.tsx"></script>
11 | </body>
12 | </html>
13 |
--------------------------------------------------------------------------------
/examples/search-params/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "search-params",
3 | "private": true,
4 | "scripts": {
5 | "dev": "vite",
6 | "build": "tsc && vite build",
7 | "serve": "vite preview"
8 | },
9 | "dependencies": {
10 | "react": "^18.2.0",
11 | "react-dom": "^18.2.0",
12 | "react-router-dom": "^6.15.0"
13 | },
14 | "devDependencies": {
15 | "@rollup/plugin-replace": "^5.0.2",
16 | "@types/node": "^18.11.18",
17 | "@types/react": "^18.0.27",
18 | "@types/react-dom": "^18.0.10",
19 | "@vitejs/plugin-react": "^3.0.1",
20 | "typescript": "^4.9.5",
21 | "vite": "^4.0.4"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/examples/search-params/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
3 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
4 | sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | }
8 |
9 | code {
10 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
11 | monospace;
12 | }
13 |
--------------------------------------------------------------------------------
/examples/search-params/src/main.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom/client";
3 | import { BrowserRouter } from "react-router-dom";
4 |
5 | import App from "./App";
6 | import "./index.css";
7 |
8 | ReactDOM.createRoot(document.getElementById("root")).render(
9 | <React.StrictMode>
10 | <BrowserRouter>
11 | <App />
12 | </BrowserRouter>
13 | </React.StrictMode>
14 | );
15 |
--------------------------------------------------------------------------------
/examples/search-params/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |
--------------------------------------------------------------------------------
/examples/search-params/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "verbatimModuleSyntax": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 | "importsNotUsedAsValues": "error"
18 | },
19 | "include": ["./src"]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/ssr-data-router/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/ssr-data-router/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <title>React Router - Data Router SSR Example</title>
7 | <link rel="stylesheet" href="/src/index.css" />
8 | </head>
9 | <body>
10 | <div id="app"><!--app-html--></div>
11 | <script type="module" src="/src/entry.client.tsx"></script>
12 | </body>
13 | </html>
14 |
--------------------------------------------------------------------------------
/examples/ssr-data-router/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
3 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
4 | sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | }
8 |
9 | code {
10 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
11 | monospace;
12 | }
13 |
--------------------------------------------------------------------------------
/examples/ssr-data-router/src/lazy.tsx:
--------------------------------------------------------------------------------
1 | import { useLoaderData } from "react-router-dom";
2 |
3 | interface LazyLoaderData {
4 | date: string;
5 | }
6 |
7 | export const loader = async (): Promise<LazyLoaderData> => {
8 | await new Promise((r) => setTimeout(r, 500));
9 | return {
10 | date: new Date().toISOString(),
11 | };
12 | };
13 |
14 | function LazyPage() {
15 | let data = useLoaderData() as LazyLoaderData;
16 |
17 | return (
18 | <>
19 | <h2>Lazy Route</h2>
20 | <p>Date from loader: {data.date}</p>
21 | </>
22 | );
23 | }
24 |
25 | export const element = <LazyPage />;
26 |
--------------------------------------------------------------------------------
/examples/ssr-data-router/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |
--------------------------------------------------------------------------------
/examples/ssr-data-router/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "verbatimModuleSyntax": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 | "types": ["vite/client"],
18 | "importsNotUsedAsValues": "error"
19 | },
20 | "include": ["./src"]
21 | }
22 |
--------------------------------------------------------------------------------
/examples/ssr/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/ssr/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <title>React Router - SSR Example</title>
7 | </head>
8 | <body>
9 | <div id="app"><!--app-html--></div>
10 | <script type="module" src="/src/entry.client.tsx"></script>
11 | </body>
12 | </html>
13 |
--------------------------------------------------------------------------------
/examples/ssr/src/entry.client.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom/client";
3 | import { BrowserRouter } from "react-router-dom";
4 |
5 | import "./index.css";
6 | import App from "./App";
7 |
8 | ReactDOM.hydrateRoot(
9 | document.getElementById("app"),
10 | <React.StrictMode>
11 | <BrowserRouter>
12 | <App />
13 | </BrowserRouter>
14 | </React.StrictMode>
15 | );
16 |
--------------------------------------------------------------------------------
/examples/ssr/src/entry.server.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import ReactDOMServer from "react-dom/server";
3 | import { StaticRouter } from "react-router-dom/server";
4 |
5 | import App from "./App";
6 |
7 | export function render(url: string) {
8 | return ReactDOMServer.renderToString(
9 | <React.StrictMode>
10 | <StaticRouter location={url}>
11 | <App />
12 | </StaticRouter>
13 | </React.StrictMode>
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/examples/ssr/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
3 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
4 | sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | }
8 |
9 | code {
10 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
11 | monospace;
12 | }
13 |
--------------------------------------------------------------------------------
/examples/ssr/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |
--------------------------------------------------------------------------------
/examples/ssr/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "verbatimModuleSyntax": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 | "types": ["vite/client"],
18 | "importsNotUsedAsValues": "error"
19 | },
20 | "include": ["./src"]
21 | }
22 |
--------------------------------------------------------------------------------
/examples/view-transitions/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 |
--------------------------------------------------------------------------------
/examples/view-transitions/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 | "installDependencies": true,
3 | "startCommand": "npm run dev"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/view-transitions/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: View Transitions
3 | toc: false
4 | ---
5 |
6 | # startViewTransition (Experimental)
7 |
8 | This example demonstrates a simple usage of a Data Router with `document.startViewTransition` enabled.
9 |
10 | ## Preview
11 |
12 | Open this example on [StackBlitz](https://stackblitz.com):
13 |
14 | [](https://stackblitz.com/github/remix-run/react-router/tree/main/examples/view-transitions?file=src/App.tsx)
15 |
--------------------------------------------------------------------------------
/examples/view-transitions/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <title>React Router - Basic Data Router Example</title>
7 | </head>
8 | <body>
9 | <div id="root"></div>
10 | <script type="module" src="/src/main.tsx"></script>
11 | </body>
12 | </html>
13 |
--------------------------------------------------------------------------------
/examples/view-transitions/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |
--------------------------------------------------------------------------------
/examples/view-transitions/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "verbatimModuleSyntax": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 | "importsNotUsedAsValues": "error"
18 | },
19 | "include": ["./src"]
20 | }
21 |
--------------------------------------------------------------------------------
/integration/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # integration-tests
2 |
3 | ## 0.0.0
4 |
5 | ### Minor Changes
6 |
7 | - Unstable Vite support for Node-based Remix apps ([#7590](https://github.com/remix-run/remix/pull/7590))
8 |
9 | - `remix build` 👉 `vite build && vite build --ssr`
10 | - `remix dev` 👉 `vite dev`
11 |
12 | Other runtimes (e.g. Deno, Cloudflare) not yet supported.
13 | Custom server (e.g. Express) not yet supported.
14 |
15 | See "Future > Vite" in the Remix Docs for details.
16 |
--------------------------------------------------------------------------------
/integration/assets/toupload.txt:
--------------------------------------------------------------------------------
1 | Hello, World!
--------------------------------------------------------------------------------
/integration/helpers/cloudflare-dev-proxy-template/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | /build
4 | .env
5 | .react-router
6 |
--------------------------------------------------------------------------------
/integration/helpers/cloudflare-dev-proxy-template/app/routes.ts:
--------------------------------------------------------------------------------
1 | import { type RouteConfig } from "@react-router/dev/routes";
2 | import { flatRoutes } from "@react-router/fs-routes";
3 |
4 | export default flatRoutes() satisfies RouteConfig;
5 |
--------------------------------------------------------------------------------
/integration/helpers/cloudflare-dev-proxy-template/app/routes/_index.tsx:
--------------------------------------------------------------------------------
1 | import type { MetaFunction } from "react-router";
2 |
3 | export const meta: MetaFunction = () => {
4 | return [
5 | { title: "New React Router App" },
6 | { name: "description", content: "React Router + Cloudflare" },
7 | ];
8 | };
9 |
10 | export default function Index() {
11 | return (
12 | <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
13 | <h1>Welcome to React Router + Cloudflare</h1>
14 | </div>
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/integration/helpers/cloudflare-dev-proxy-template/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/integration/helpers/cloudflare-dev-proxy-template/public/favicon.ico
--------------------------------------------------------------------------------
/integration/helpers/cloudflare-dev-proxy-template/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { cloudflareDevProxy } from "@react-router/dev/vite/cloudflare";
3 | import { defineConfig } from "vite";
4 |
5 | export default defineConfig({
6 | plugins: [cloudflareDevProxy(), reactRouter()],
7 | });
8 |
--------------------------------------------------------------------------------
/integration/helpers/vite-5-template/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | /.cache
4 | /build
5 | .env
6 | .react-router
7 |
--------------------------------------------------------------------------------
/integration/helpers/vite-5-template/app/root.tsx:
--------------------------------------------------------------------------------
1 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
2 |
3 | export default function App() {
4 | return (
5 | <html lang="en">
6 | <head>
7 | <meta charSet="utf-8" />
8 | <meta name="viewport" content="width=device-width, initial-scale=1" />
9 | <Meta />
10 | <Links />
11 | </head>
12 | <body>
13 | <Outlet />
14 | <ScrollRestoration />
15 | <Scripts />
16 | </body>
17 | </html>
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/integration/helpers/vite-5-template/app/routes.ts:
--------------------------------------------------------------------------------
1 | import { type RouteConfig } from "@react-router/dev/routes";
2 | import { flatRoutes } from "@react-router/fs-routes";
3 |
4 | export default flatRoutes() satisfies RouteConfig;
5 |
--------------------------------------------------------------------------------
/integration/helpers/vite-5-template/app/routes/_index.tsx:
--------------------------------------------------------------------------------
1 | import type { MetaFunction } from "react-router";
2 |
3 | export const meta: MetaFunction = () => {
4 | return [
5 | { title: "New React Router App" },
6 | { name: "description", content: "Welcome to React Router!" },
7 | ];
8 | };
9 |
10 | export default function Index() {
11 | return (
12 | <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
13 | <h1>Welcome to React Router</h1>
14 | </div>
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/integration/helpers/vite-5-template/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="@react-router/node" />
2 | /// <reference types="vite/client" />
3 |
--------------------------------------------------------------------------------
/integration/helpers/vite-5-template/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/integration/helpers/vite-5-template/public/favicon.ico
--------------------------------------------------------------------------------
/integration/helpers/vite-5-template/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { defineConfig } from "vite";
3 | import tsconfigPaths from "vite-tsconfig-paths";
4 |
5 | export default defineConfig({
6 | plugins: [
7 | // @ts-expect-error `dev` depends on Vite 6, Plugin type is mismatched.
8 | reactRouter(),
9 | tsconfigPaths(),
10 | ],
11 | });
12 |
--------------------------------------------------------------------------------
/integration/helpers/vite-6-template/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | /.cache
4 | /build
5 | .env
6 | .react-router
7 |
--------------------------------------------------------------------------------
/integration/helpers/vite-6-template/app/root.tsx:
--------------------------------------------------------------------------------
1 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
2 |
3 | export default function App() {
4 | return (
5 | <html lang="en">
6 | <head>
7 | <meta charSet="utf-8" />
8 | <meta name="viewport" content="width=device-width, initial-scale=1" />
9 | <Meta />
10 | <Links />
11 | </head>
12 | <body>
13 | <Outlet />
14 | <ScrollRestoration />
15 | <Scripts />
16 | </body>
17 | </html>
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/integration/helpers/vite-6-template/app/routes.ts:
--------------------------------------------------------------------------------
1 | import { type RouteConfig } from "@react-router/dev/routes";
2 | import { flatRoutes } from "@react-router/fs-routes";
3 |
4 | export default flatRoutes() satisfies RouteConfig;
5 |
--------------------------------------------------------------------------------
/integration/helpers/vite-6-template/app/routes/_index.tsx:
--------------------------------------------------------------------------------
1 | import type { MetaFunction } from "react-router";
2 |
3 | export const meta: MetaFunction = () => {
4 | return [
5 | { title: "New React Router App" },
6 | { name: "description", content: "Welcome to React Router!" },
7 | ];
8 | };
9 |
10 | export default function Index() {
11 | return (
12 | <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
13 | <h1>Welcome to React Router</h1>
14 | </div>
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/integration/helpers/vite-6-template/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="@react-router/node" />
2 | /// <reference types="vite/client" />
3 |
--------------------------------------------------------------------------------
/integration/helpers/vite-6-template/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/integration/helpers/vite-6-template/public/favicon.ico
--------------------------------------------------------------------------------
/integration/helpers/vite-6-template/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { defineConfig } from "vite";
3 | import tsconfigPaths from "vite-tsconfig-paths";
4 |
5 | export default defineConfig({
6 | plugins: [reactRouter(), tsconfigPaths()],
7 | });
8 |
--------------------------------------------------------------------------------
/integration/helpers/vite-7-beta-template/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | /.cache
4 | /build
5 | .env
6 | .react-router
7 |
--------------------------------------------------------------------------------
/integration/helpers/vite-7-beta-template/app/root.tsx:
--------------------------------------------------------------------------------
1 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
2 |
3 | export default function App() {
4 | return (
5 | <html lang="en">
6 | <head>
7 | <meta charSet="utf-8" />
8 | <meta name="viewport" content="width=device-width, initial-scale=1" />
9 | <Meta />
10 | <Links />
11 | </head>
12 | <body>
13 | <Outlet />
14 | <ScrollRestoration />
15 | <Scripts />
16 | </body>
17 | </html>
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/integration/helpers/vite-7-beta-template/app/routes.ts:
--------------------------------------------------------------------------------
1 | import { type RouteConfig } from "@react-router/dev/routes";
2 | import { flatRoutes } from "@react-router/fs-routes";
3 |
4 | export default flatRoutes() satisfies RouteConfig;
5 |
--------------------------------------------------------------------------------
/integration/helpers/vite-7-beta-template/app/routes/_index.tsx:
--------------------------------------------------------------------------------
1 | import type { MetaFunction } from "react-router";
2 |
3 | export const meta: MetaFunction = () => {
4 | return [
5 | { title: "New React Router App" },
6 | { name: "description", content: "Welcome to React Router!" },
7 | ];
8 | };
9 |
10 | export default function Index() {
11 | return (
12 | <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
13 | <h1>Welcome to React Router</h1>
14 | </div>
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/integration/helpers/vite-7-beta-template/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="@react-router/node" />
2 | /// <reference types="vite/client" />
3 |
--------------------------------------------------------------------------------
/integration/helpers/vite-7-beta-template/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/integration/helpers/vite-7-beta-template/public/favicon.ico
--------------------------------------------------------------------------------
/integration/helpers/vite-7-beta-template/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { defineConfig } from "vite";
3 | import tsconfigPaths from "vite-tsconfig-paths";
4 |
5 | export default defineConfig({
6 | // @ts-expect-error `dev` depends on Vite 6, Plugin type is mismatched.
7 | plugins: [reactRouter(), tsconfigPaths()],
8 | });
9 |
--------------------------------------------------------------------------------
/integration/helpers/vite-plugin-cloudflare-template/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | /node_modules/
3 | *.tsbuildinfo
4 |
5 | # React Router
6 | /.react-router/
7 | /build/
8 |
9 | # Cloudflare
10 | .mf
11 | .wrangler
12 |
--------------------------------------------------------------------------------
/integration/helpers/vite-plugin-cloudflare-template/app/root.tsx:
--------------------------------------------------------------------------------
1 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
2 |
3 | export default function App() {
4 | return (
5 | <html lang="en">
6 | <head>
7 | <meta charSet="utf-8" />
8 | <meta name="viewport" content="width=device-width, initial-scale=1" />
9 | <Meta />
10 | <Links />
11 | </head>
12 | <body>
13 | <Outlet />
14 | <ScrollRestoration />
15 | <Scripts />
16 | </body>
17 | </html>
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/integration/helpers/vite-plugin-cloudflare-template/app/routes.ts:
--------------------------------------------------------------------------------
1 | import { type RouteConfig } from "@react-router/dev/routes";
2 | import { flatRoutes } from "@react-router/fs-routes";
3 |
4 | export default flatRoutes() satisfies RouteConfig;
5 |
--------------------------------------------------------------------------------
/integration/helpers/vite-plugin-cloudflare-template/app/routes/_index.tsx:
--------------------------------------------------------------------------------
1 | import type { MetaFunction } from "react-router";
2 |
3 | export const meta: MetaFunction = () => {
4 | return [
5 | { title: "New React Router App" },
6 | { name: "description", content: "Welcome to React Router!" },
7 | ];
8 | };
9 |
10 | export default function Index() {
11 | return (
12 | <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
13 | <h1>Welcome to React Router</h1>
14 | </div>
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/integration/helpers/vite-plugin-cloudflare-template/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/integration/helpers/vite-plugin-cloudflare-template/public/favicon.ico
--------------------------------------------------------------------------------
/integration/helpers/vite-plugin-cloudflare-template/react-router.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "@react-router/dev/config";
2 |
3 | export default {
4 | future: {
5 | unstable_viteEnvironmentApi: true,
6 | },
7 | } satisfies Config;
8 |
--------------------------------------------------------------------------------
/integration/helpers/vite-plugin-cloudflare-template/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [],
3 | "references": [
4 | { "path": "./tsconfig.node.json" },
5 | { "path": "./tsconfig.cloudflare.json" }
6 | ],
7 | "compilerOptions": {
8 | "checkJs": true,
9 | "verbatimModuleSyntax": true,
10 | "skipLibCheck": true,
11 | "strict": true,
12 | "noEmit": true
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/integration/helpers/vite-plugin-cloudflare-template/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "include": ["react-router.config.ts", "vite.config.ts"],
4 | "compilerOptions": {
5 | "composite": true,
6 | "strict": true,
7 | "types": ["node"],
8 | "lib": ["ES2022"],
9 | "target": "ES2022",
10 | "module": "ES2022",
11 | "moduleResolution": "bundler"
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/integration/helpers/vite-plugin-cloudflare-template/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { defineConfig } from "vite";
3 | import tsconfigPaths from "vite-tsconfig-paths";
4 | import { cloudflare } from "@cloudflare/vite-plugin";
5 |
6 | export default defineConfig({
7 | plugins: [
8 | cloudflare({ viteEnvironment: { name: "ssr" } }),
9 | reactRouter(),
10 | tsconfigPaths(),
11 | ],
12 | });
13 |
--------------------------------------------------------------------------------
/integration/helpers/vite-plugin-cloudflare-template/wrangler.toml:
--------------------------------------------------------------------------------
1 | name = "react-router-app"
2 | compatibility_date = "2025-03-17"
3 | main = "./workers/app.ts"
4 |
5 | assets = {}
6 |
7 | [vars]
8 | VALUE_FROM_CLOUDFLARE = "Hello from Cloudflare"
9 |
--------------------------------------------------------------------------------
/integration/helpers/vite-rolldown-template/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | /.cache
4 | /build
5 | .env
6 | .react-router
7 |
--------------------------------------------------------------------------------
/integration/helpers/vite-rolldown-template/app/root.tsx:
--------------------------------------------------------------------------------
1 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
2 |
3 | export default function App() {
4 | return (
5 | <html lang="en">
6 | <head>
7 | <meta charSet="utf-8" />
8 | <meta name="viewport" content="width=device-width, initial-scale=1" />
9 | <Meta />
10 | <Links />
11 | </head>
12 | <body>
13 | <Outlet />
14 | <ScrollRestoration />
15 | <Scripts />
16 | </body>
17 | </html>
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/integration/helpers/vite-rolldown-template/app/routes.ts:
--------------------------------------------------------------------------------
1 | import { type RouteConfig } from "@react-router/dev/routes";
2 | import { flatRoutes } from "@react-router/fs-routes";
3 |
4 | export default flatRoutes() satisfies RouteConfig;
5 |
--------------------------------------------------------------------------------
/integration/helpers/vite-rolldown-template/app/routes/_index.tsx:
--------------------------------------------------------------------------------
1 | import type { MetaFunction } from "react-router";
2 |
3 | export const meta: MetaFunction = () => {
4 | return [
5 | { title: "New React Router App" },
6 | { name: "description", content: "Welcome to React Router!" },
7 | ];
8 | };
9 |
10 | export default function Index() {
11 | return (
12 | <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
13 | <h1>Welcome to React Router</h1>
14 | </div>
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/integration/helpers/vite-rolldown-template/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="@react-router/node" />
2 | /// <reference types="vite/client" />
3 |
--------------------------------------------------------------------------------
/integration/helpers/vite-rolldown-template/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/integration/helpers/vite-rolldown-template/public/favicon.ico
--------------------------------------------------------------------------------
/integration/helpers/vite-rolldown-template/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { defineConfig } from "vite";
3 | import tsconfigPaths from "vite-tsconfig-paths";
4 |
5 | export default defineConfig({
6 | plugins: [
7 | // @ts-expect-error `dev` depends on Vite 6, Plugin type is mismatched.
8 | reactRouter(),
9 | tsconfigPaths(),
10 | ],
11 | });
12 |
--------------------------------------------------------------------------------
/integration/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["**/*.ts"],
3 | "exclude": ["helpers/*-template"],
4 | "compilerOptions": {
5 | "lib": ["DOM", "DOM.Iterable", "ES2022"],
6 | "target": "ES2022",
7 | "module": "ES2022",
8 | "skipLibCheck": true,
9 |
10 | "moduleResolution": "Bundler",
11 | "allowSyntheticDefaultImports": true,
12 | "strict": true,
13 | "resolveJsonModule": true,
14 |
15 | "noEmit": true,
16 |
17 | "rootDir": "."
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/packages/create-react-router/README.md:
--------------------------------------------------------------------------------
1 | Create a new React Router app.
2 |
3 | ```sh
4 | npm create react-router
5 | ```
6 |
--------------------------------------------------------------------------------
/packages/create-react-router/__tests__/fixtures/basic/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | /.cache
4 | /build
5 | .env
6 | .react-router
7 |
--------------------------------------------------------------------------------
/packages/create-react-router/__tests__/fixtures/basic/app/routes.ts:
--------------------------------------------------------------------------------
1 | import type { RouteConfig } from "@react-router/dev/routes";
2 | import { index } from "@react-router/dev/routes";
3 |
4 | export default [index("routes/home.tsx")] satisfies RouteConfig;
5 |
--------------------------------------------------------------------------------
/packages/create-react-router/__tests__/fixtures/basic/app/routes/home.tsx:
--------------------------------------------------------------------------------
1 | import type { MetaFunction } from "react-router";
2 |
3 | export const meta: MetaFunction = () => {
4 | return [
5 | { title: "New React Router App" },
6 | { name: "description", content: "Welcome to React Router!" },
7 | ];
8 | };
9 |
10 | export default function Index() {
11 | return <h1>Welcome to React Router</h1>;
12 | }
13 |
--------------------------------------------------------------------------------
/packages/create-react-router/__tests__/fixtures/basic/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "sideEffects": false,
4 | "type": "module",
5 | "scripts": {
6 | "dev": "react-router dev",
7 | "build": "react-router build",
8 | "start": "react-router-serve ./build/server/index.js"
9 | },
10 | "dependencies": {
11 | "react-router": "*",
12 | "react-router-dom": "*",
13 | "@react-router/node": "*",
14 | "not-react-router": "*"
15 | },
16 | "devDependencies": {},
17 | "engines": {
18 | "node": ">=20.0.0"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/create-react-router/__tests__/fixtures/basic/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/packages/create-react-router/__tests__/fixtures/basic/public/favicon.ico
--------------------------------------------------------------------------------
/packages/create-react-router/__tests__/fixtures/basic/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { defineConfig } from "vite";
3 |
4 | export default defineConfig({
5 | plugins: [reactRouter()],
6 | });
7 |
--------------------------------------------------------------------------------
/packages/create-react-router/__tests__/fixtures/blank/package.json:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/packages/create-react-router/__tests__/fixtures/nested-dir-repo.tar.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/packages/create-react-router/__tests__/fixtures/nested-dir-repo.tar.gz
--------------------------------------------------------------------------------
/packages/create-react-router/__tests__/fixtures/template.tar.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/packages/create-react-router/__tests__/fixtures/template.tar.gz
--------------------------------------------------------------------------------
/packages/create-react-router/__tests__/fixtures/template.tgz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/packages/create-react-router/__tests__/fixtures/template.tgz
--------------------------------------------------------------------------------
/packages/create-react-router/__tests__/fixtures/templates-repo.tar.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/packages/create-react-router/__tests__/fixtures/templates-repo.tar.gz
--------------------------------------------------------------------------------
/packages/create-react-router/__tests__/fixtures/with-ignored-dir/package.json:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/packages/create-react-router/__tests__/msw-register.ts:
--------------------------------------------------------------------------------
1 | import process from "node:process";
2 |
3 | import { server } from "./msw";
4 |
5 | server.listen({ onUnhandledRequest: "error" });
6 |
7 | process.on("exit", () => {
8 | server.close();
9 | });
10 |
--------------------------------------------------------------------------------
/packages/create-react-router/__tests__/setupAfterEnv.ts:
--------------------------------------------------------------------------------
1 | export let jestTimeout = process.platform === "win32" ? 20_000 : 10_000;
2 |
3 | jest.setTimeout(jestTimeout);
4 |
--------------------------------------------------------------------------------
/packages/create-react-router/cli.ts:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | import process from "node:process";
3 |
4 | import { createReactRouter } from "./index";
5 |
6 | process.on("SIGINT", () => process.exit(0));
7 | process.on("SIGTERM", () => process.exit(0));
8 |
9 | let argv = process.argv.slice(2).filter((arg) => arg !== "--");
10 |
11 | createReactRouter(argv).then(
12 | () => process.exit(0),
13 | () => process.exit(1)
14 | );
15 |
--------------------------------------------------------------------------------
/packages/create-react-router/jest.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('jest').Config} */
2 | module.exports = {
3 | ...require("../../jest/jest.config.shared"),
4 | displayName: "create-react-router",
5 | setupFilesAfterEnv: ["<rootDir>/__tests__/setupAfterEnv.ts"],
6 | setupFiles: [],
7 | };
8 |
--------------------------------------------------------------------------------
/packages/create-react-router/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["**/*.ts", "./package.json"],
3 | "exclude": ["dist", "**/node_modules/**", "__tests__"],
4 | "compilerOptions": {
5 | "lib": ["DOM", "DOM.Iterable", "ES2022"],
6 | "target": "ES2022",
7 | "module": "ES2022",
8 | "skipLibCheck": true,
9 | "moduleResolution": "Bundler",
10 | "allowSyntheticDefaultImports": true,
11 | "strict": true,
12 | "resolveJsonModule": true,
13 | "declaration": true,
14 | "noEmit": true,
15 | "rootDir": ".",
16 | "outDir": "dist"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/packages/create-react-router/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "tsup";
2 |
3 | // @ts-ignore - out of scope
4 | import { createBanner } from "../../build.utils.js";
5 |
6 | import pkg from "./package.json";
7 |
8 | const entry = ["cli.ts"];
9 |
10 | export default defineConfig([
11 | {
12 | clean: true,
13 | entry,
14 | format: ["cjs"],
15 | outDir: "dist",
16 | dts: true,
17 | banner: {
18 | js: createBanner(pkg.name, pkg.version),
19 | },
20 | },
21 | ]);
22 |
--------------------------------------------------------------------------------
/packages/react-router-architect/README.md:
--------------------------------------------------------------------------------
1 | [Architect](https://arc.codes) server request handler for React Router.
2 |
3 | ```bash
4 | npm install @react-router/architect
5 | ```
6 |
--------------------------------------------------------------------------------
/packages/react-router-architect/__tests__/554828.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/packages/react-router-architect/__tests__/554828.jpeg
--------------------------------------------------------------------------------
/packages/react-router-architect/__tests__/binaryTypes-test.ts:
--------------------------------------------------------------------------------
1 | import { isBinaryType } from "../binaryTypes";
2 |
3 | describe("architect isBinaryType", () => {
4 | it("should detect binary contentType correctly", () => {
5 | expect(isBinaryType(undefined)).toBe(false);
6 | expect(isBinaryType(null)).toBe(false);
7 | expect(isBinaryType("text/html; charset=utf-8")).toBe(false);
8 | expect(isBinaryType("application/octet-stream")).toBe(true);
9 | expect(isBinaryType("application/octet-stream; charset=test")).toBe(true);
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/packages/react-router-architect/index.ts:
--------------------------------------------------------------------------------
1 | export { createArcTableSessionStorage } from "./sessions/arcTableSessionStorage";
2 |
3 | export type { GetLoadContextFunction, RequestHandler } from "./server";
4 | export { createRequestHandler } from "./server";
5 |
--------------------------------------------------------------------------------
/packages/react-router-architect/jest.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('jest').Config} */
2 | module.exports = {
3 | ...require("../../jest/jest.config.shared"),
4 | displayName: "architect",
5 | };
6 |
--------------------------------------------------------------------------------
/packages/react-router-architect/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "tsup";
2 |
3 | // @ts-ignore - out of scope
4 | import { createBanner } from "../../build.utils.js";
5 |
6 | import pkg from "./package.json";
7 |
8 | const entry = ["index.ts"];
9 |
10 | export default defineConfig([
11 | {
12 | clean: true,
13 | entry,
14 | format: ["cjs", "esm"],
15 | outDir: "dist",
16 | dts: true,
17 | banner: {
18 | js: createBanner(pkg.name, pkg.version),
19 | },
20 | },
21 | ]);
22 |
--------------------------------------------------------------------------------
/packages/react-router-architect/typedoc.json:
--------------------------------------------------------------------------------
1 | {
2 | "entryPoints": ["./index.ts"]
3 | }
4 |
--------------------------------------------------------------------------------
/packages/react-router-cloudflare/README.md:
--------------------------------------------------------------------------------
1 | Cloudflare platform abstractions for React Router
2 |
3 | ```bash
4 | npm install @react-router/cloudflare @cloudflare/workers-types
5 | ```
6 |
--------------------------------------------------------------------------------
/packages/react-router-cloudflare/index.ts:
--------------------------------------------------------------------------------
1 | export { createWorkersKVSessionStorage } from "./sessions/workersKVStorage";
2 |
3 | export type {
4 | createPagesFunctionHandlerParams,
5 | GetLoadContextFunction,
6 | RequestHandler,
7 | } from "./worker";
8 | export { createPagesFunctionHandler, createRequestHandler } from "./worker";
9 |
--------------------------------------------------------------------------------
/packages/react-router-cloudflare/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "tsup";
2 |
3 | // @ts-ignore - out of scope
4 | import { createBanner } from "../../build.utils.js";
5 |
6 | import pkg from "./package.json";
7 |
8 | const entry = ["index.ts"];
9 |
10 | export default defineConfig([
11 | {
12 | clean: true,
13 | entry,
14 | format: ["cjs", "esm"],
15 | outDir: "dist",
16 | dts: true,
17 | banner: {
18 | js: createBanner(pkg.name, pkg.version),
19 | },
20 | },
21 | ]);
22 |
--------------------------------------------------------------------------------
/packages/react-router-cloudflare/typedoc.json:
--------------------------------------------------------------------------------
1 | {
2 | "entryPoints": ["./index.ts"]
3 | }
4 |
--------------------------------------------------------------------------------
/packages/react-router-dev/.gitignore:
--------------------------------------------------------------------------------
1 | server-build.js
2 | server-build.d.ts
3 |
--------------------------------------------------------------------------------
/packages/react-router-dev/README.md:
--------------------------------------------------------------------------------
1 | Dev tools and CLI for React Router that enables framework features through bundler integration like server rendering, code splitting, HMR, etc.
2 |
3 | ```sh
4 | npm install @react-router/dev --save-dev
5 | ```
6 |
--------------------------------------------------------------------------------
/packages/react-router-dev/__tests__/fixtures/basic/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | /build
4 | .env
5 |
6 | .react-router/
7 |
--------------------------------------------------------------------------------
/packages/react-router-dev/__tests__/fixtures/basic/app/root.tsx:
--------------------------------------------------------------------------------
1 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
2 |
3 | export default function App() {
4 | return (
5 | <html lang="en">
6 | <head>
7 | <meta charSet="utf-8" />
8 | <meta name="viewport" content="width=device-width, initial-scale=1" />
9 | <Meta />
10 | <Links />
11 | </head>
12 | <body>
13 | <Outlet />
14 | <ScrollRestoration />
15 | <Scripts />
16 | </body>
17 | </html>
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/packages/react-router-dev/__tests__/fixtures/basic/app/routes.ts:
--------------------------------------------------------------------------------
1 | // Note that since this is used in a unit test context, we don't have access to
2 | // the `dev` build yet, so we can't import from `@react-router/dev/routes`.
3 | const routes = [{ file: "routes/_index.tsx", index: true }];
4 |
5 | export default routes;
6 |
--------------------------------------------------------------------------------
/packages/react-router-dev/__tests__/fixtures/basic/app/routes/_index.tsx:
--------------------------------------------------------------------------------
1 | import type { MetaFunction } from "react-router";
2 |
3 | export const meta: MetaFunction = () => {
4 | return [
5 | { title: "New React Router App" },
6 | { name: "description", content: "Welcome to React Router!" },
7 | ];
8 | };
9 |
10 | export default function Index() {
11 | return (
12 | <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
13 | <h1>Welcome to React Router</h1>
14 | </div>
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/packages/react-router-dev/__tests__/fixtures/basic/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/packages/react-router-dev/__tests__/fixtures/basic/public/favicon.ico
--------------------------------------------------------------------------------
/packages/react-router-dev/__tests__/setupAfterEnv.ts:
--------------------------------------------------------------------------------
1 | export let jestTimeout = process.platform === "win32" ? 20_000 : 10_000;
2 |
3 | jest.setTimeout(jestTimeout);
4 |
--------------------------------------------------------------------------------
/packages/react-router-dev/__tests__/utils/captureError.ts:
--------------------------------------------------------------------------------
1 | class NoErrorThrownError extends Error {}
2 |
3 | export default async function captureError(
4 | erroring: Promise<unknown> | (() => Promise<unknown>)
5 | ) {
6 | try {
7 | let promise = typeof erroring === "function" ? erroring() : erroring;
8 | await promise;
9 | throw new NoErrorThrownError();
10 | } catch (error: unknown) {
11 | if (error instanceof NoErrorThrownError) throw error;
12 | return error;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/packages/react-router-dev/__tests__/utils/eol.ts:
--------------------------------------------------------------------------------
1 | export const normalize = (text: string, normalized = "\n") =>
2 | text.replace(/\r?\n/g, normalized);
3 |
--------------------------------------------------------------------------------
/packages/react-router-dev/__tests__/utils/git.ts:
--------------------------------------------------------------------------------
1 | import execa from "execa";
2 |
3 | export const initialCommit = async (projectDir: string) => {
4 | let run = (cmd: string, args: string[]) =>
5 | execa(cmd, args, { cwd: projectDir });
6 | let commands = [
7 | ["init"],
8 |
9 | ["config", "user.name", '"github-actions[bot]"'],
10 | ["config", "user.email", '"github-actions[bot]@users.noreply.github.com"'],
11 |
12 | ["add", "."],
13 | ["commit", "--message", '"initial commit"'],
14 | ];
15 | for (let command of commands) {
16 | await run("git", command);
17 | }
18 | };
19 |
--------------------------------------------------------------------------------
/packages/react-router-dev/cli/index.ts:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | import { run } from "./run";
3 |
4 | run().then(
5 | () => {
6 | process.exit(0);
7 | },
8 | (error: unknown) => {
9 | if (error) console.error(error);
10 | process.exit(1);
11 | }
12 | );
13 |
--------------------------------------------------------------------------------
/packages/react-router-dev/config.ts:
--------------------------------------------------------------------------------
1 | export type {
2 | ReactRouterConfig as Config,
3 | BuildManifest,
4 | Preset,
5 | ServerBundlesFunction,
6 | } from "./config/config";
7 |
--------------------------------------------------------------------------------
/packages/react-router-dev/config/defaults/entry.client.tsx:
--------------------------------------------------------------------------------
1 | import { startTransition, StrictMode } from "react";
2 | import { hydrateRoot } from "react-dom/client";
3 | import { HydratedRouter } from "react-router/dom";
4 |
5 | startTransition(() => {
6 | hydrateRoot(
7 | document,
8 | <StrictMode>
9 | <HydratedRouter />
10 | </StrictMode>
11 | );
12 | });
13 |
--------------------------------------------------------------------------------
/packages/react-router-dev/config/is-react-router-repo.ts:
--------------------------------------------------------------------------------
1 | import path from "pathe";
2 |
3 | export function isReactRouterRepo() {
4 | // We use '@react-router/node' for this check since it's a
5 | // dependency of this package and guaranteed to be in node_modules
6 | let serverRuntimePath = path.dirname(
7 | require.resolve("@react-router/node/package.json")
8 | );
9 | let serverRuntimeParentDir = path.basename(
10 | path.resolve(serverRuntimePath, "..")
11 | );
12 | return serverRuntimeParentDir === "packages";
13 | }
14 |
--------------------------------------------------------------------------------
/packages/react-router-dev/jest.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('jest').Config} */
2 | module.exports = {
3 | ...require("../../jest/jest.config.shared"),
4 | displayName: "dev",
5 | setupFilesAfterEnv: ["<rootDir>/__tests__/setupAfterEnv.ts"],
6 | setupFiles: [],
7 | };
8 |
--------------------------------------------------------------------------------
/packages/react-router-dev/module-sync-enabled/false.cjs:
--------------------------------------------------------------------------------
1 | exports.default = false;
2 |
--------------------------------------------------------------------------------
/packages/react-router-dev/module-sync-enabled/index.d.mts:
--------------------------------------------------------------------------------
1 | declare const moduleSyncEnabled: boolean;
2 | export { moduleSyncEnabled };
3 |
--------------------------------------------------------------------------------
/packages/react-router-dev/module-sync-enabled/index.mjs:
--------------------------------------------------------------------------------
1 | import { createRequire } from "node:module";
2 | const require = createRequire(import.meta.url);
3 | const moduleSyncEnabled = require("#module-sync-enabled").default;
4 | export { moduleSyncEnabled };
5 |
--------------------------------------------------------------------------------
/packages/react-router-dev/module-sync-enabled/true.mjs:
--------------------------------------------------------------------------------
1 | const moduleSyncEnabled = true;
2 | export default moduleSyncEnabled;
3 |
--------------------------------------------------------------------------------
/packages/react-router-dev/routes.ts:
--------------------------------------------------------------------------------
1 | export type { RouteConfig, RouteConfigEntry } from "./config/routes";
2 |
3 | export {
4 | route,
5 | index,
6 | layout,
7 | prefix,
8 | relative,
9 | getAppDirectory,
10 | } from "./config/routes";
11 |
--------------------------------------------------------------------------------
/packages/react-router-dev/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["**/*.ts", "package.json"],
3 | "exclude": ["dist", "__tests__", "node_modules"],
4 | "compilerOptions": {
5 | "lib": ["DOM", "DOM.Iterable", "ES2022"],
6 | "target": "ES2022",
7 | "module": "ES2022",
8 | "moduleResolution": "Bundler",
9 |
10 | "strict": true,
11 | "jsx": "react",
12 |
13 | "skipLibCheck": true,
14 |
15 | "outDir": "dist",
16 | "rootDir": ".",
17 | "noEmit": true,
18 | "resolveJsonModule": true,
19 | "allowSyntheticDefaultImports": true
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/packages/react-router-dev/typedoc.json:
--------------------------------------------------------------------------------
1 | {
2 | "entryPoints": [
3 | "./index.ts",
4 | "./config.ts",
5 | "./routes.ts",
6 | "./vite.ts",
7 | "./vite/cloudflare.ts"
8 | ]
9 | }
10 |
--------------------------------------------------------------------------------
/packages/react-router-dev/typegen/params.ts:
--------------------------------------------------------------------------------
1 | export function parse(fullpath: string) {
2 | const result: Record<string, boolean> = {};
3 |
4 | let segments = fullpath.split("/");
5 | segments.forEach((segment) => {
6 | const match = segment.match(/^:([\w-]+)(\?)?/);
7 | if (!match) return;
8 | const param = match[1];
9 | const isRequired = match[2] === undefined;
10 |
11 | result[param] ||= isRequired;
12 | return;
13 | });
14 |
15 | const hasSplat = segments.at(-1) === "*";
16 | if (hasSplat) result["*"] = true;
17 | return result;
18 | }
19 |
--------------------------------------------------------------------------------
/packages/react-router-dev/vite.ts:
--------------------------------------------------------------------------------
1 | export { reactRouterVitePlugin as reactRouter } from "./vite/plugin";
2 |
--------------------------------------------------------------------------------
/packages/react-router-dev/vite/cloudflare.ts:
--------------------------------------------------------------------------------
1 | export { cloudflareDevProxyVitePlugin as cloudflareDevProxy } from "./cloudflare-dev-proxy";
2 |
--------------------------------------------------------------------------------
/packages/react-router-dev/vite/combine-urls.ts:
--------------------------------------------------------------------------------
1 | // Borrowed from axios: https://github.com/axios/axios/blob/0e4f9fa29077ebee4499facea6be1492b42e8a26/lib/helpers/combineURLs.js#L11-L15
2 | export function combineURLs(baseURL: string, relativeURL: string) {
3 | return relativeURL
4 | ? baseURL.replace(/\/+$/, "") + "/" + relativeURL.replace(/^\/+/, "")
5 | : baseURL;
6 | }
7 |
--------------------------------------------------------------------------------
/packages/react-router-dev/vite/virtual-module.ts:
--------------------------------------------------------------------------------
1 | export function create(name: string) {
2 | let id = `virtual:react-router/${name}`;
3 | return {
4 | id,
5 | resolvedId: `\0${id}`,
6 | url: `/@id/__x00__${id}`,
7 | };
8 | }
9 |
--------------------------------------------------------------------------------
/packages/react-router-dom/README.md:
--------------------------------------------------------------------------------
1 | This package simply re-exports everything from `react-router` to smooth the upgrade path for v6 applications. Once upgraded you can change all of your imports and remove it from your dependencies:
2 |
3 | ```diff
4 | -import { Routes } from "react-router-dom"
5 | +import { Routes } from "react-router"
6 | ```
7 |
--------------------------------------------------------------------------------
/packages/react-router-dom/index.ts:
--------------------------------------------------------------------------------
1 | import type { RouterProviderProps } from "react-router/dom";
2 | import { HydratedRouter, RouterProvider } from "react-router/dom";
3 |
4 | // TODO: Confirm if this causes tree-shaking issues and if so, convert to named exports
5 | export type * from "react-router";
6 | export * from "react-router";
7 |
8 | export type { RouterProviderProps };
9 | export { HydratedRouter, RouterProvider };
10 |
--------------------------------------------------------------------------------
/packages/react-router-dom/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["index.ts"],
3 | "compilerOptions": {
4 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
5 | "target": "ES2020",
6 | "module": "Node16",
7 | "moduleResolution": "Node16",
8 |
9 | "strict": true,
10 | "jsx": "react",
11 |
12 | "declaration": true,
13 | "emitDeclarationOnly": true,
14 |
15 | "skipLibCheck": true,
16 |
17 | "outDir": "dist",
18 | "rootDir": "."
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/react-router-dom/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "tsup";
2 |
3 | // @ts-ignore - out of scope
4 | import { createBanner } from "../../build.utils.js";
5 |
6 | import pkg from "./package.json";
7 |
8 | const entry = ["index.ts"];
9 |
10 | export default defineConfig([
11 | {
12 | clean: true,
13 | entry,
14 | format: ["cjs", "esm"],
15 | outDir: "dist",
16 | dts: true,
17 | banner: {
18 | js: createBanner(pkg.name, pkg.version),
19 | },
20 | },
21 | ]);
22 |
--------------------------------------------------------------------------------
/packages/react-router-express/README.md:
--------------------------------------------------------------------------------
1 | [Express](https://expressjs.com) server request handler for React Router.
2 |
3 | ```sh
4 | npm install @react-router/express
5 | ```
6 |
--------------------------------------------------------------------------------
/packages/react-router-express/index.ts:
--------------------------------------------------------------------------------
1 | export type { GetLoadContextFunction, RequestHandler } from "./server";
2 | export { createRequestHandler } from "./server";
3 |
--------------------------------------------------------------------------------
/packages/react-router-express/jest.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('jest').Config} */
2 | module.exports = {
3 | ...require("../../jest/jest.config.shared"),
4 | displayName: "express",
5 | };
6 |
--------------------------------------------------------------------------------
/packages/react-router-express/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["**/*.ts"],
3 | "exclude": ["dist", "__tests__", "node_modules"],
4 | "compilerOptions": {
5 | "lib": ["DOM", "DOM.Iterable", "ES2022"],
6 | "target": "ES2022",
7 | "module": "ES2022",
8 | "skipLibCheck": true,
9 |
10 | "moduleResolution": "Bundler",
11 | "allowSyntheticDefaultImports": true,
12 | "strict": true,
13 | "jsx": "react",
14 | "declaration": true,
15 | "emitDeclarationOnly": true,
16 | "rootDir": ".",
17 | "outDir": "./dist"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/packages/react-router-express/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "tsup";
2 |
3 | // @ts-ignore - out of scope
4 | import { createBanner } from "../../build.utils.js";
5 |
6 | import pkg from "./package.json";
7 |
8 | const entry = ["index.ts"];
9 |
10 | export default defineConfig([
11 | {
12 | clean: true,
13 | entry,
14 | format: ["cjs", "esm"],
15 | outDir: "dist",
16 | dts: true,
17 | banner: {
18 | js: createBanner(pkg.name, pkg.version),
19 | },
20 | },
21 | ]);
22 |
--------------------------------------------------------------------------------
/packages/react-router-express/typedoc.json:
--------------------------------------------------------------------------------
1 | {
2 | "entryPoints": ["./index.ts"]
3 | }
4 |
--------------------------------------------------------------------------------
/packages/react-router-fs-routes/README.md:
--------------------------------------------------------------------------------
1 | File system routing conventions for React Router
2 |
3 | ```sh
4 | npm install @react-router/fs-routes
5 | ```
6 |
--------------------------------------------------------------------------------
/packages/react-router-fs-routes/jest.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('jest').Config} */
2 | module.exports = {
3 | ...require("../../jest/jest.config.shared"),
4 | displayName: "fs-routes",
5 | setupFiles: [],
6 | };
7 |
--------------------------------------------------------------------------------
/packages/react-router-fs-routes/normalizeSlashes.ts:
--------------------------------------------------------------------------------
1 | import path from "node:path";
2 |
3 | export function normalizeSlashes(file: string) {
4 | return file.replaceAll(path.win32.sep, "/");
5 | }
6 |
--------------------------------------------------------------------------------
/packages/react-router-fs-routes/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["**/*.ts"],
3 | "exclude": ["dist", "__tests__", "node_modules"],
4 | "compilerOptions": {
5 | "lib": ["DOM", "DOM.Iterable", "ES2022"],
6 | "target": "ES2022",
7 | "module": "ES2022",
8 | "skipLibCheck": true,
9 |
10 | "moduleResolution": "Bundler",
11 | "allowSyntheticDefaultImports": true,
12 | "strict": true,
13 | "jsx": "react",
14 | "declaration": true,
15 | "emitDeclarationOnly": true,
16 | "rootDir": ".",
17 | "outDir": "./dist"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/packages/react-router-fs-routes/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "tsup";
2 |
3 | // @ts-ignore - out of scope
4 | import { createBanner } from "../../build.utils.js";
5 |
6 | import pkg from "./package.json";
7 |
8 | const entry = ["index.ts"];
9 |
10 | export default defineConfig([
11 | {
12 | clean: true,
13 | entry,
14 | format: ["cjs"],
15 | outDir: "dist",
16 | dts: true,
17 | banner: {
18 | js: createBanner(pkg.name, pkg.version),
19 | },
20 | },
21 | ]);
22 |
--------------------------------------------------------------------------------
/packages/react-router-fs-routes/typedoc.json:
--------------------------------------------------------------------------------
1 | {
2 | "entryPoints": ["./index.ts"]
3 | }
4 |
--------------------------------------------------------------------------------
/packages/react-router-node/.gitignore:
--------------------------------------------------------------------------------
1 | # TODO: Remove in v2
2 | globals.d.ts
--------------------------------------------------------------------------------
/packages/react-router-node/README.md:
--------------------------------------------------------------------------------
1 | Node.js platform abstractions for React Router
2 |
3 | ```sh
4 | npm install @react-router/node
5 | ```
6 |
--------------------------------------------------------------------------------
/packages/react-router-node/index.ts:
--------------------------------------------------------------------------------
1 | export { type RequestListenerOptions, createRequestListener } from "./server";
2 |
3 | export { createFileSessionStorage } from "./sessions/fileStorage";
4 |
5 | export {
6 | createReadableStreamFromReadable,
7 | readableStreamToString,
8 | writeAsyncIterableToWritable,
9 | writeReadableStreamToWritable,
10 | } from "./stream";
11 |
--------------------------------------------------------------------------------
/packages/react-router-node/jest.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('jest').Config} */
2 | module.exports = {
3 | ...require("../../jest/jest.config.shared"),
4 | displayName: "node",
5 | };
6 |
--------------------------------------------------------------------------------
/packages/react-router-node/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "tsup";
2 |
3 | // @ts-ignore - out of scope
4 | import { createBanner } from "../../build.utils.js";
5 |
6 | import pkg from "./package.json";
7 |
8 | const entry = ["index.ts"];
9 |
10 | export default defineConfig([
11 | {
12 | clean: true,
13 | entry,
14 | format: ["cjs", "esm"],
15 | outDir: "dist",
16 | dts: true,
17 | banner: {
18 | js: createBanner(pkg.name, pkg.version),
19 | },
20 | },
21 | ]);
22 |
--------------------------------------------------------------------------------
/packages/react-router-node/typedoc.json:
--------------------------------------------------------------------------------
1 | {
2 | "entryPoints": ["./index.ts"]
3 | }
4 |
--------------------------------------------------------------------------------
/packages/react-router-remix-routes-option-adapter/README.md:
--------------------------------------------------------------------------------
1 | # @react-router/remix-routes-option-adapter
2 |
3 | Adapter for [Remix's](https://remix.run) `routes` config option, for use within `routes.ts`.
4 |
5 | ```sh
6 | npm install @react-router/remix-routes-option-adapter
7 | ```
8 |
--------------------------------------------------------------------------------
/packages/react-router-remix-routes-option-adapter/jest.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('jest').Config} */
2 | module.exports = {
3 | ...require("../../jest/jest.config.shared"),
4 | displayName: "remix-routes-option-adapter",
5 | setupFiles: [],
6 | };
7 |
--------------------------------------------------------------------------------
/packages/react-router-remix-routes-option-adapter/normalizeSlashes.ts:
--------------------------------------------------------------------------------
1 | import path from "node:path";
2 |
3 | export function normalizeSlashes(file: string) {
4 | return file.replaceAll(path.win32.sep, "/");
5 | }
6 |
--------------------------------------------------------------------------------
/packages/react-router-remix-routes-option-adapter/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["**/*.ts"],
3 | "exclude": ["dist", "__tests__", "node_modules"],
4 | "compilerOptions": {
5 | "lib": ["DOM", "DOM.Iterable", "ES2022"],
6 | "target": "ES2022",
7 | "module": "ES2022",
8 | "skipLibCheck": true,
9 |
10 | "moduleResolution": "Bundler",
11 | "allowSyntheticDefaultImports": true,
12 | "strict": true,
13 | "jsx": "react",
14 | "declaration": true,
15 | "emitDeclarationOnly": true,
16 | "rootDir": ".",
17 | "outDir": "./dist"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/packages/react-router-remix-routes-option-adapter/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "tsup";
2 |
3 | // @ts-ignore - out of scope
4 | import { createBanner } from "../../build.utils.js";
5 |
6 | import pkg from "./package.json";
7 |
8 | const entry = ["index.ts"];
9 |
10 | export default defineConfig([
11 | {
12 | clean: true,
13 | entry,
14 | format: ["cjs"],
15 | outDir: "dist",
16 | dts: true,
17 | banner: {
18 | js: createBanner(pkg.name, pkg.version),
19 | },
20 | },
21 | ]);
22 |
--------------------------------------------------------------------------------
/packages/react-router-remix-routes-option-adapter/typedoc.json:
--------------------------------------------------------------------------------
1 | {
2 | "entryPoints": ["./index.ts"]
3 | }
4 |
--------------------------------------------------------------------------------
/packages/react-router-serve/README.md:
--------------------------------------------------------------------------------
1 | Node.js application server for React Router
2 |
3 | ```sh
4 | npm install @react-router/serve
5 | ```
6 |
--------------------------------------------------------------------------------
/packages/react-router-serve/bin.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | // If not already set, default `NODE_ENV=production` so React loads the proper
4 | // version in it's CJS entry script
5 | process.env.NODE_ENV = process.env.NODE_ENV ?? "production";
6 |
7 | require("./dist/cli");
8 |
--------------------------------------------------------------------------------
/packages/react-router-serve/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["**/*.ts"],
3 | "exclude": ["dist", "node_modules"],
4 | "compilerOptions": {
5 | "lib": ["DOM", "DOM.Iterable", "ES2022"],
6 | "target": "ES2022",
7 | "module": "ES2022",
8 | "skipLibCheck": true,
9 |
10 | "moduleResolution": "Bundler",
11 | "allowSyntheticDefaultImports": true,
12 | "strict": true,
13 | "jsx": "react",
14 | "declaration": true,
15 | "emitDeclarationOnly": true,
16 | "rootDir": ".",
17 | "outDir": "./dist"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/packages/react-router-serve/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "tsup";
2 |
3 | // @ts-ignore - out of scope
4 | import { createBanner } from "../../build.utils.js";
5 |
6 | import pkg from "./package.json";
7 |
8 | const entry = ["cli.ts"];
9 |
10 | export default defineConfig([
11 | {
12 | clean: true,
13 | entry,
14 | format: ["cjs"],
15 | outDir: "dist",
16 | dts: true,
17 | banner: {
18 | js: createBanner(pkg.name, pkg.version),
19 | },
20 | },
21 | ]);
22 |
--------------------------------------------------------------------------------
/packages/react-router-serve/typedoc.json:
--------------------------------------------------------------------------------
1 | {
2 | "entryPoints": ["./cli.ts"]
3 | }
4 |
--------------------------------------------------------------------------------
/packages/react-router/.eslintrc.js:
--------------------------------------------------------------------------------
1 | let restrictedGlobalsError = `Node globals are not allowed in this package.`;
2 |
3 | module.exports = {
4 | env: {
5 | browser: true,
6 | commonjs: true,
7 | },
8 | rules: {
9 | strict: 0,
10 | "no-restricted-globals": [
11 | "error",
12 | { name: "__dirname", message: restrictedGlobalsError },
13 | { name: "__filename", message: restrictedGlobalsError },
14 | { name: "Buffer", message: restrictedGlobalsError },
15 | ],
16 | "import/no-nodejs-modules": "error",
17 | },
18 | };
19 |
--------------------------------------------------------------------------------
/packages/react-router/README.md:
--------------------------------------------------------------------------------
1 | `react-router` is the primary package in the React Router project.
2 |
3 | ## Installation
4 |
5 | ```sh
6 | npm i react-router
7 | ```
8 |
--------------------------------------------------------------------------------
/packages/react-router/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | },
5 | "rules": {
6 | "no-console": 0,
7 | "no-restricted-globals": "off",
8 | "import/no-nodejs-modules": "off"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/react-router/__tests__/dom/components/LazyComponent.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | export default function LazyComponent() {
4 | return <h1>Lazy</h1>;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/react-router/__tests__/dom/polyfills/drop-FormData-submitter.ts:
--------------------------------------------------------------------------------
1 | // Drop support for the submitter parameter, as in a legacy browser. This needs
2 | // to be a standalone module due to how jest requires things (i.e. we can't
3 | // just do this inline in data-browser-router-legacy-formdata-test.tsx)
4 | window.FormData = class FormData extends window["FormData"] {
5 | constructor(form?: HTMLFormElement) {
6 | super(form, undefined);
7 | }
8 | };
9 |
--------------------------------------------------------------------------------
/packages/react-router/__tests__/router/TestSequences/InitialLocationDefaultKey.ts:
--------------------------------------------------------------------------------
1 | import type { History } from "../../../lib/router/history";
2 |
3 | export default function InitialLocationDefaultKey(history: History) {
4 | expect(history.location.key).toBe("default");
5 | }
6 |
--------------------------------------------------------------------------------
/packages/react-router/__tests__/router/TestSequences/InitialLocationHasKey.ts:
--------------------------------------------------------------------------------
1 | import type { History } from "../../../lib/router/history";
2 |
3 | export default function InitialLocationHasKey(history: History) {
4 | expect(history.location.key).toBeTruthy();
5 | }
6 |
--------------------------------------------------------------------------------
/packages/react-router/__tests__/router/TestSequences/Listen.ts:
--------------------------------------------------------------------------------
1 | import type { History } from "../../../lib/router/history";
2 |
3 | export default function Listen(history: History) {
4 | let spy = jest.fn();
5 | let unlisten = history.listen(spy);
6 |
7 | expect(spy).not.toHaveBeenCalled();
8 |
9 | unlisten();
10 | }
11 |
--------------------------------------------------------------------------------
/packages/react-router/__tests__/router/TestSequences/ListenPopOnly.ts:
--------------------------------------------------------------------------------
1 | import type { History } from "../../../lib/router/history";
2 |
3 | export default function ListenPopOnly(history: History) {
4 | let spy = jest.fn();
5 | let unlisten = history.listen(spy);
6 |
7 | history.push("/2");
8 | expect(history.location.pathname).toBe("/2");
9 | history.replace("/3");
10 | expect(history.location.pathname).toBe("/3");
11 |
12 | expect(spy).not.toHaveBeenCalled();
13 | unlisten();
14 | }
15 |
--------------------------------------------------------------------------------
/packages/react-router/__tests__/router/TestSequences/PushNewLocation.ts:
--------------------------------------------------------------------------------
1 | import type { History } from "../../../lib/router/history";
2 |
3 | export default function PushNewLocation(history: History) {
4 | expect(history.location).toMatchObject({
5 | pathname: "/",
6 | });
7 |
8 | history.push("/home?the=query#the-hash");
9 | expect(history.action).toBe("PUSH");
10 | expect(history.location).toMatchObject({
11 | pathname: "/home",
12 | search: "?the=query",
13 | hash: "#the-hash",
14 | state: null,
15 | key: expect.any(String),
16 | });
17 | }
18 |
--------------------------------------------------------------------------------
/packages/react-router/__tests__/router/TestSequences/PushState.ts:
--------------------------------------------------------------------------------
1 | import type { History } from "../../../lib/router/history";
2 |
3 | export default function PushState(history: History) {
4 | expect(history.location).toMatchObject({
5 | pathname: "/",
6 | });
7 |
8 | history.push("/home?the=query#the-hash", { the: "state" });
9 | expect(history.action).toBe("PUSH");
10 | expect(history.location).toMatchObject({
11 | pathname: "/home",
12 | search: "?the=query",
13 | hash: "#the-hash",
14 | state: { the: "state" },
15 | });
16 | }
17 |
--------------------------------------------------------------------------------
/packages/react-router/__tests__/router/TestSequences/ReplaceState.ts:
--------------------------------------------------------------------------------
1 | import type { History } from "../../../lib/router/history";
2 |
3 | export default function ReplaceState(history: History) {
4 | expect(history.location).toMatchObject({
5 | pathname: "/",
6 | });
7 |
8 | history.replace("/home?the=query#the-hash", { the: "state" });
9 | expect(history.action).toBe("REPLACE");
10 | expect(history.location).toMatchObject({
11 | pathname: "/home",
12 | search: "?the=query",
13 | hash: "#the-hash",
14 | state: { the: "state" },
15 | });
16 | }
17 |
--------------------------------------------------------------------------------
/packages/react-router/__tests__/utils/getHtml.ts:
--------------------------------------------------------------------------------
1 | import { prettyDOM } from "@testing-library/react";
2 |
3 | export default function getHtml(container: HTMLElement) {
4 | return prettyDOM(container, undefined, {
5 | highlight: false,
6 | });
7 | }
8 |
--------------------------------------------------------------------------------
/packages/react-router/__tests__/utils/renderStrict.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom";
3 |
4 | let StrictMode: React.FC = function (props) {
5 | return props.children || (null as any);
6 | };
7 |
8 | if (React.StrictMode) {
9 | StrictMode = React.StrictMode;
10 | }
11 |
12 | function renderStrict(
13 | element:
14 | | React.FunctionComponentElement<any>
15 | | React.FunctionComponentElement<any>[],
16 | node: ReactDOM.Container
17 | ): void {
18 | ReactDOM.render(<StrictMode>{element}</StrictMode>, node);
19 | }
20 |
21 | export default renderStrict;
22 |
--------------------------------------------------------------------------------
/packages/react-router/__tests__/utils/tick.ts:
--------------------------------------------------------------------------------
1 | export default async function tick() {
2 | await new Promise((r) => setTimeout(r, 0));
3 | }
4 |
--------------------------------------------------------------------------------
/packages/react-router/__tests__/utils/waitForRedirect.tsx:
--------------------------------------------------------------------------------
1 | export default function waitForRedirect(fn: (...args: any[]) => void) {
2 | // TODO: Hook into <Redirect> so we can know when
3 | // the redirect actually happens instead of guessing.
4 | setTimeout(fn, 100);
5 | }
6 |
--------------------------------------------------------------------------------
/packages/react-router/dom-export.ts:
--------------------------------------------------------------------------------
1 | export type { RouterProviderProps } from "./lib/dom-export/dom-router-provider";
2 | export { RouterProvider } from "./lib/dom-export/dom-router-provider";
3 | export { HydratedRouter } from "./lib/dom-export/hydrated-router";
4 |
--------------------------------------------------------------------------------
/packages/react-router/jest.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('jest').Config} */
2 | module.exports = {
3 | ...require("../../jest/jest.config.shared"),
4 | setupFiles: ["<rootDir>/__tests__/setup.ts"],
5 | setupFilesAfterEnv: ["@testing-library/jest-dom"],
6 | testEnvironment: "jsdom",
7 | };
8 |
--------------------------------------------------------------------------------
/packages/react-router/lib/dom-export/dom-router-provider.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom";
3 |
4 | import type { RouterProviderProps as BaseRouterProviderProps } from "react-router";
5 | import { RouterProvider as BaseRouterProvider } from "react-router";
6 |
7 | export type RouterProviderProps = Omit<BaseRouterProviderProps, "flushSync">;
8 |
9 | export function RouterProvider(props: Omit<RouterProviderProps, "flushSync">) {
10 | return <BaseRouterProvider flushSync={ReactDOM.flushSync} {...props} />;
11 | }
12 |
--------------------------------------------------------------------------------
/packages/react-router/lib/dom/node-main.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | if (process.env.NODE_ENV === "production") {
4 | module.exports = require("./umd/react-router-dom.production.min.js");
5 | } else {
6 | module.exports = require("./umd/react-router-dom.development.js");
7 | }
8 |
--------------------------------------------------------------------------------
/packages/react-router/lib/dom/ssr/invariant.ts:
--------------------------------------------------------------------------------
1 | export default function invariant(
2 | value: boolean,
3 | message?: string
4 | ): asserts value;
5 | export default function invariant<T>(
6 | value: T | null | undefined,
7 | message?: string
8 | ): asserts value is T;
9 | export default function invariant(value: any, message?: string) {
10 | if (value === false || value === null || typeof value === "undefined") {
11 | throw new Error(message);
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/packages/react-router/lib/server-runtime/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | rules: {
3 | "no-restricted-syntax": "off",
4 | },
5 | };
6 |
--------------------------------------------------------------------------------
/packages/react-router/lib/server-runtime/entry.ts:
--------------------------------------------------------------------------------
1 | import type { RouteModules } from "../dom/ssr/routeModules";
2 | import type { ServerRouteManifest } from "./routes";
3 |
4 | export function createEntryRouteModules(
5 | manifest: ServerRouteManifest
6 | ): RouteModules {
7 | return Object.keys(manifest).reduce((memo, routeId) => {
8 | let route = manifest[routeId];
9 | if (route) {
10 | memo[routeId] = route.module;
11 | }
12 | return memo;
13 | }, {} as RouteModules);
14 | }
15 |
--------------------------------------------------------------------------------
/packages/react-router/lib/server-runtime/mode.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * The mode to use when running the server.
3 | */
4 | export enum ServerMode {
5 | Development = "development",
6 | Production = "production",
7 | Test = "test",
8 | }
9 |
10 | export function isServerMode(value: any): value is ServerMode {
11 | return (
12 | value === ServerMode.Development ||
13 | value === ServerMode.Production ||
14 | value === ServerMode.Test
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/packages/react-router/lib/server-runtime/warnings.ts:
--------------------------------------------------------------------------------
1 | const alreadyWarned: { [message: string]: boolean } = {};
2 |
3 | export function warnOnce(condition: boolean, message: string): void {
4 | if (!condition && !alreadyWarned[message]) {
5 | alreadyWarned[message] = true;
6 | console.warn(message);
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/react-router/lib/types/future.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * An augmentable interface users can modify in their app-code to opt into
3 | * future-flag-specific types
4 | */
5 | export interface Future {}
6 |
7 | // prettier-ignore
8 | export type MiddlewareEnabled =
9 | Future extends { unstable_middleware: infer T extends boolean; } ? T : false
10 |
--------------------------------------------------------------------------------
/packages/react-router/lib/types/internal.ts:
--------------------------------------------------------------------------------
1 | export type { GetAnnotations } from "./route-module-annotations";
2 |
3 | import type { Params } from "./params";
4 | import type { RouteFiles } from "./register";
5 | import type { GetLoaderData, GetActionData } from "./route-data";
6 | import type { RouteModule } from "./route-module.ts";
7 |
8 | export type GetInfo<T extends { file: keyof RouteFiles; module: RouteModule }> =
9 | {
10 | params: Params<T["file"]>;
11 | loaderData: GetLoaderData<T["module"]>;
12 | actionData: GetActionData<T["module"]>;
13 | };
14 |
--------------------------------------------------------------------------------
/packages/react-router/lib/types/params.ts:
--------------------------------------------------------------------------------
1 | import type { Pages, RouteFiles } from "./register";
2 | import type { Normalize } from "./utils";
3 |
4 | export type Params<RouteFile extends keyof RouteFiles> = Normalize<
5 | Pages[RouteFiles[RouteFile]["page"]]["params"]
6 | >;
7 |
--------------------------------------------------------------------------------
/packages/react-router/lib/types/route-module.ts:
--------------------------------------------------------------------------------
1 | import type { Func } from "./utils";
2 |
3 | export type RouteModule = {
4 | meta?: Func;
5 | links?: Func;
6 | headers?: Func;
7 | loader?: Func;
8 | clientLoader?: Func;
9 | action?: Func;
10 | clientAction?: Func;
11 | HydrateFallback?: Func;
12 | default?: Func;
13 | ErrorBoundary?: Func;
14 | [key: string]: unknown; // allow user-defined exports
15 | };
16 |
--------------------------------------------------------------------------------
/packages/react-router/node-main-dom-export.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | if (process.env.NODE_ENV === "production") {
4 | module.exports = require("./umd/react-router-dom.production.min.js");
5 | } else {
6 | module.exports = require("./umd/react-router-dom.development.js");
7 | }
8 |
--------------------------------------------------------------------------------
/packages/react-router/node-main.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | if (process.env.NODE_ENV === "production") {
4 | module.exports = require("./umd/react-router.production.min.js");
5 | } else {
6 | module.exports = require("./umd/react-router.development.js");
7 | }
8 |
--------------------------------------------------------------------------------
/packages/react-router/tsconfig.dom.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "include": ["./dom-export.tsx"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/react-router/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["**/*.ts"],
3 | "exclude": ["dist", "__tests__", "node_modules"],
4 | "compilerOptions": {
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "target": "ES2020",
7 | "module": "Node16",
8 | "moduleResolution": "Node16",
9 |
10 | "strict": true,
11 | "jsx": "react",
12 |
13 | "declaration": true,
14 |
15 | "skipLibCheck": true,
16 |
17 | "outDir": "dist",
18 | "rootDir": ".",
19 | "noEmit": true,
20 | "resolveJsonModule": true,
21 | "paths": {
22 | "react-router": ["./index.ts"]
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/react-router/typedoc.json:
--------------------------------------------------------------------------------
1 | {
2 | "entryPoints": ["./index.ts"],
3 | "categoryOrder": [
4 | "Components",
5 | "Hooks",
6 | "Data Routers",
7 | "Component Routers",
8 | "Utils",
9 | "Types",
10 | "*"
11 | ]
12 | }
13 |
--------------------------------------------------------------------------------
/playground/framework-express/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | /build
4 | .env
5 |
6 | .react-router/
7 |
--------------------------------------------------------------------------------
/playground/framework-express/app/routes.ts:
--------------------------------------------------------------------------------
1 | import { type RouteConfig, index } from "@react-router/dev/routes";
2 |
3 | export default [index("routes/_index.tsx")] satisfies RouteConfig;
4 |
--------------------------------------------------------------------------------
/playground/framework-express/app/routes/_index.tsx:
--------------------------------------------------------------------------------
1 | import type { MetaFunction } from "react-router";
2 |
3 | export const meta: MetaFunction = () => {
4 | return [
5 | { title: "New React Router App" },
6 | { name: "description", content: "Welcome to React Router!" },
7 | ];
8 | };
9 |
10 | export default function Index() {
11 | return (
12 | <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
13 | <h1>Welcome to React Router</h1>
14 | </div>
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/playground/framework-express/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/playground/framework-express/public/favicon.ico
--------------------------------------------------------------------------------
/playground/framework-express/react-router.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "@react-router/dev/config";
2 |
3 | export default {} satisfies Config;
4 |
--------------------------------------------------------------------------------
/playground/framework-express/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { defineConfig } from "vite";
3 | import tsconfigPaths from "vite-tsconfig-paths";
4 |
5 | export default defineConfig({
6 | plugins: [reactRouter(), tsconfigPaths()],
7 | });
8 |
--------------------------------------------------------------------------------
/playground/framework-rolldown-vite/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | /build
4 | .env
5 |
6 | .react-router/
7 |
--------------------------------------------------------------------------------
/playground/framework-rolldown-vite/app/routes.ts:
--------------------------------------------------------------------------------
1 | import { type RouteConfig, index, route } from "@react-router/dev/routes";
2 |
3 | export default [
4 | index("routes/_index.tsx"),
5 | route("products/:id", "routes/product.tsx"),
6 | ] satisfies RouteConfig;
7 |
--------------------------------------------------------------------------------
/playground/framework-rolldown-vite/app/routes/_index.tsx:
--------------------------------------------------------------------------------
1 | import type { Route } from "./+types/_index";
2 |
3 | export function loader({ params }: Route.LoaderArgs) {
4 | return { planet: "world", date: new Date(), fn: () => 1 };
5 | }
6 |
7 | export default function Index({ loaderData }: Route.ComponentProps) {
8 | return <h1>Hello, {loaderData.planet}!</h1>;
9 | }
10 |
--------------------------------------------------------------------------------
/playground/framework-rolldown-vite/app/routes/product.tsx:
--------------------------------------------------------------------------------
1 | import type { Route } from "./+types/product";
2 |
3 | export function loader({ params }: Route.LoaderArgs) {
4 | return { name: `Super cool product #${params.id}` };
5 | }
6 |
7 | export default function Component({ loaderData }: Route.ComponentProps) {
8 | return <h1>{loaderData.name}</h1>;
9 | }
10 |
--------------------------------------------------------------------------------
/playground/framework-rolldown-vite/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/playground/framework-rolldown-vite/public/favicon.ico
--------------------------------------------------------------------------------
/playground/framework-rolldown-vite/react-router.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "@react-router/dev/config";
2 |
3 | export default {} satisfies Config;
4 |
--------------------------------------------------------------------------------
/playground/framework-spa/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | /build
4 | .env
5 |
6 | .react-router/
7 |
--------------------------------------------------------------------------------
/playground/framework-spa/app/routes.ts:
--------------------------------------------------------------------------------
1 | import { type RouteConfig, index } from "@react-router/dev/routes";
2 |
3 | export default [index("routes/_index.tsx")] satisfies RouteConfig;
4 |
--------------------------------------------------------------------------------
/playground/framework-spa/app/routes/_index.tsx:
--------------------------------------------------------------------------------
1 | import type { MetaFunction } from "react-router";
2 |
3 | export const meta: MetaFunction = () => {
4 | return [
5 | { title: "New React Router App" },
6 | { name: "description", content: "Welcome to React Router!" },
7 | ];
8 | };
9 |
10 | export default function Index() {
11 | return (
12 | <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
13 | <h1>Welcome to React Router</h1>
14 | </div>
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/playground/framework-spa/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/playground/framework-spa/public/favicon.ico
--------------------------------------------------------------------------------
/playground/framework-spa/react-router.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "@react-router/dev/config";
2 |
3 | export default {
4 | ssr: false,
5 | } satisfies Config;
6 |
--------------------------------------------------------------------------------
/playground/framework-spa/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { defineConfig } from "vite";
3 | import tsconfigPaths from "vite-tsconfig-paths";
4 |
5 | export default defineConfig({
6 | plugins: [reactRouter(), tsconfigPaths()],
7 | });
8 |
--------------------------------------------------------------------------------
/playground/framework-vite-5/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | /build
4 | .env
5 |
6 | .react-router/
--------------------------------------------------------------------------------
/playground/framework-vite-5/app/routes.ts:
--------------------------------------------------------------------------------
1 | import { type RouteConfig, index, route } from "@react-router/dev/routes";
2 |
3 | export default [
4 | index("routes/_index.tsx"),
5 | route("products/:id", "routes/product.tsx"),
6 | ] satisfies RouteConfig;
7 |
--------------------------------------------------------------------------------
/playground/framework-vite-5/app/routes/_index.tsx:
--------------------------------------------------------------------------------
1 | import type { Route } from "./+types/_index";
2 |
3 | export function loader({ params }: Route.LoaderArgs) {
4 | return { planet: "world", date: new Date(), fn: () => 1 };
5 | }
6 |
7 | export default function Index({ loaderData }: Route.ComponentProps) {
8 | return <h1>Hello, {loaderData.planet}!</h1>;
9 | }
10 |
--------------------------------------------------------------------------------
/playground/framework-vite-5/app/routes/product.tsx:
--------------------------------------------------------------------------------
1 | import type { Route } from "./+types/product";
2 |
3 | export function loader({ params }: Route.LoaderArgs) {
4 | return { name: `Super cool product #${params.id}` };
5 | }
6 |
7 | export default function Component({ loaderData }: Route.ComponentProps) {
8 | return <h1>{loaderData.name}</h1>;
9 | }
10 |
--------------------------------------------------------------------------------
/playground/framework-vite-5/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/playground/framework-vite-5/public/favicon.ico
--------------------------------------------------------------------------------
/playground/framework-vite-5/react-router.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "@react-router/dev/config";
2 |
3 | export default {} satisfies Config;
4 |
--------------------------------------------------------------------------------
/playground/framework-vite-5/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { defineConfig } from "vite";
3 | import tsconfigPaths from "vite-tsconfig-paths";
4 |
5 | export default defineConfig({
6 | plugins: [
7 | // @ts-expect-error `dev` depends on Vite 6, Plugin type is mismatched.
8 | reactRouter(),
9 | tsconfigPaths(),
10 | ],
11 | });
12 |
--------------------------------------------------------------------------------
/playground/framework-vite-7-beta/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | /build
4 | .env
5 |
6 | .react-router/
--------------------------------------------------------------------------------
/playground/framework-vite-7-beta/app/routes.ts:
--------------------------------------------------------------------------------
1 | import { type RouteConfig, index, route } from "@react-router/dev/routes";
2 |
3 | export default [
4 | index("routes/_index.tsx"),
5 | route("products/:id", "routes/product.tsx"),
6 | ] satisfies RouteConfig;
7 |
--------------------------------------------------------------------------------
/playground/framework-vite-7-beta/app/routes/_index.tsx:
--------------------------------------------------------------------------------
1 | import type { Route } from "./+types/_index";
2 |
3 | export function loader({ params }: Route.LoaderArgs) {
4 | return { planet: "world", date: new Date(), fn: () => 1 };
5 | }
6 |
7 | export default function Index({ loaderData }: Route.ComponentProps) {
8 | return <h1>Hello, {loaderData.planet}!</h1>;
9 | }
10 |
--------------------------------------------------------------------------------
/playground/framework-vite-7-beta/app/routes/product.tsx:
--------------------------------------------------------------------------------
1 | import type { Route } from "./+types/product";
2 |
3 | export function loader({ params }: Route.LoaderArgs) {
4 | return { name: `Super cool product #${params.id}` };
5 | }
6 |
7 | export default function Component({ loaderData }: Route.ComponentProps) {
8 | return <h1>{loaderData.name}</h1>;
9 | }
10 |
--------------------------------------------------------------------------------
/playground/framework-vite-7-beta/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/playground/framework-vite-7-beta/public/favicon.ico
--------------------------------------------------------------------------------
/playground/framework-vite-7-beta/react-router.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "@react-router/dev/config";
2 |
3 | export default {
4 | future: {
5 | unstable_subResourceIntegrity: true,
6 | unstable_optimizeDeps: true,
7 | unstable_viteEnvironmentApi: true,
8 | },
9 | } satisfies Config;
10 |
--------------------------------------------------------------------------------
/playground/framework-vite-7-beta/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { defineConfig } from "vite";
3 | import tsconfigPaths from "vite-tsconfig-paths";
4 |
5 | export default defineConfig({
6 | // @ts-expect-error `dev` depends on Vite 6, Plugin type is mismatched.
7 | plugins: [reactRouter(), tsconfigPaths()],
8 | });
9 |
--------------------------------------------------------------------------------
/playground/framework/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | /build
4 | .env
5 |
6 | .react-router/
--------------------------------------------------------------------------------
/playground/framework/app/routes.ts:
--------------------------------------------------------------------------------
1 | import { type RouteConfig, index, route } from "@react-router/dev/routes";
2 |
3 | export default [
4 | index("routes/_index.tsx"),
5 | route("products/:id", "routes/product.tsx"),
6 | ] satisfies RouteConfig;
7 |
--------------------------------------------------------------------------------
/playground/framework/app/routes/_index.tsx:
--------------------------------------------------------------------------------
1 | import type { Route } from "./+types/_index";
2 |
3 | export function loader({ params }: Route.LoaderArgs) {
4 | return { planet: "world", date: new Date(), fn: () => 1 };
5 | }
6 |
7 | export default function Index({ loaderData }: Route.ComponentProps) {
8 | return <h1>Hello, {loaderData.planet}!</h1>;
9 | }
10 |
--------------------------------------------------------------------------------
/playground/framework/app/routes/product.tsx:
--------------------------------------------------------------------------------
1 | import type { Route } from "./+types/product";
2 |
3 | export function loader({ params }: Route.LoaderArgs) {
4 | return { name: `Super cool product #${params.id}` };
5 | }
6 |
7 | export default function Component({ loaderData }: Route.ComponentProps) {
8 | return <h1>{loaderData.name}</h1>;
9 | }
10 |
--------------------------------------------------------------------------------
/playground/framework/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/playground/framework/public/favicon.ico
--------------------------------------------------------------------------------
/playground/framework/react-router.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "@react-router/dev/config";
2 |
3 | export default {
4 | future: {
5 | unstable_subResourceIntegrity: true,
6 | },
7 | } satisfies Config;
8 |
--------------------------------------------------------------------------------
/playground/framework/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { defineConfig } from "vite";
3 | import tsconfigPaths from "vite-tsconfig-paths";
4 |
5 | export default defineConfig({
6 | plugins: [reactRouter(), tsconfigPaths()],
7 | });
8 |
--------------------------------------------------------------------------------
/playground/middleware/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | /build
4 | .env
5 |
6 | .react-router/
--------------------------------------------------------------------------------
/playground/middleware/app/contexts.ts:
--------------------------------------------------------------------------------
1 | import { unstable_createContext } from "react-router";
2 |
3 | export const expressContext = unstable_createContext<string>("default");
4 | export const rootContext = unstable_createContext<string>();
5 | export const aContext = unstable_createContext<string>();
6 | export const bContext = unstable_createContext<string>("empty");
7 |
--------------------------------------------------------------------------------
/playground/middleware/app/routes.ts:
--------------------------------------------------------------------------------
1 | import type { RouteConfig } from "@react-router/dev/routes";
2 | import { flatRoutes } from "@react-router/fs-routes";
3 |
4 | export default flatRoutes() satisfies RouteConfig;
5 |
--------------------------------------------------------------------------------
/playground/middleware/app/routes/_index.tsx:
--------------------------------------------------------------------------------
1 | import type { Route } from "./+types/_index";
2 |
3 | export default function Index({}: Route.ComponentProps) {
4 | return <></>;
5 | }
6 |
--------------------------------------------------------------------------------
/playground/middleware/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/playground/middleware/public/favicon.ico
--------------------------------------------------------------------------------
/playground/middleware/react-router.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "@react-router/dev/config";
2 |
3 | export default {
4 | future: {
5 | unstable_middleware: true,
6 | unstable_splitRouteModules: true,
7 | },
8 | } satisfies Config;
9 |
--------------------------------------------------------------------------------
/playground/middleware/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [],
3 | "references": [
4 | { "path": "./tsconfig.node.json" },
5 | { "path": "./tsconfig.vite.json" }
6 | ],
7 | "compilerOptions": {
8 | "checkJs": true,
9 | "verbatimModuleSyntax": true,
10 | "skipLibCheck": true,
11 | "strict": true,
12 | "noEmit": true
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/playground/middleware/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "include": [
4 | "**/*.ts",
5 | "**/*.tsx",
6 | "dev-server.ts",
7 | "tailwind.config.ts",
8 | "vite.config.ts"
9 | ],
10 | "compilerOptions": {
11 | "composite": true,
12 | "strict": true,
13 | "types": ["node"],
14 | "lib": ["ES2022"],
15 | "target": "ES2022",
16 | "module": "ES2022",
17 | "moduleResolution": "bundler"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/playground/middleware/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { defineConfig } from "vite";
3 | import tsconfigPaths from "vite-tsconfig-paths";
4 |
5 | export default defineConfig(({ isSsrBuild }) => ({
6 | build: {
7 | minify: false,
8 | rollupOptions: isSsrBuild
9 | ? {
10 | input: "./server.ts",
11 | }
12 | : undefined,
13 | },
14 | plugins: [reactRouter(), tsconfigPaths()],
15 | }));
16 |
--------------------------------------------------------------------------------
/playground/split-route-modules-spa/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | /build
4 | .env
5 |
6 | .react-router/
7 |
--------------------------------------------------------------------------------
/playground/split-route-modules-spa/app/routes.ts:
--------------------------------------------------------------------------------
1 | import { type RouteConfig, index, route } from "@react-router/dev/routes";
2 |
3 | export default [
4 | index("routes/_index.tsx"),
5 | route("splittable", "routes/splittable.tsx"),
6 | route("unsplittable", "routes/unsplittable.tsx"),
7 | route("semi-splittable", "routes/semi-splittable.tsx"),
8 | ] satisfies RouteConfig;
9 |
--------------------------------------------------------------------------------
/playground/split-route-modules-spa/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/playground/split-route-modules-spa/public/favicon.ico
--------------------------------------------------------------------------------
/playground/split-route-modules-spa/react-router.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "@react-router/dev/config";
2 |
3 | export default {
4 | ssr: false,
5 | future: {
6 | unstable_splitRouteModules: true,
7 | },
8 | } satisfies Config;
9 |
--------------------------------------------------------------------------------
/playground/split-route-modules-spa/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { defineConfig } from "vite";
3 | import tsconfigPaths from "vite-tsconfig-paths";
4 |
5 | export default defineConfig({
6 | plugins: [reactRouter(), tsconfigPaths()],
7 | });
8 |
--------------------------------------------------------------------------------
/playground/split-route-modules/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | /build
4 | .env
5 |
6 | .react-router/
--------------------------------------------------------------------------------
/playground/split-route-modules/app/routes.ts:
--------------------------------------------------------------------------------
1 | import { type RouteConfig, index, route } from "@react-router/dev/routes";
2 |
3 | export default [
4 | index("routes/_index.tsx"),
5 | route("splittable", "routes/splittable.tsx"),
6 | route("unsplittable", "routes/unsplittable.tsx"),
7 | route("semi-splittable", "routes/semi-splittable.tsx"),
8 | ] satisfies RouteConfig;
9 |
--------------------------------------------------------------------------------
/playground/split-route-modules/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/playground/split-route-modules/public/favicon.ico
--------------------------------------------------------------------------------
/playground/split-route-modules/react-router.config.ts:
--------------------------------------------------------------------------------
1 | import { Config } from "@react-router/dev/config";
2 |
3 | export default {
4 | future: {
5 | unstable_splitRouteModules: true,
6 | },
7 | } satisfies Config;
8 |
--------------------------------------------------------------------------------
/playground/split-route-modules/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { defineConfig } from "vite";
3 | import tsconfigPaths from "vite-tsconfig-paths";
4 |
5 | export default defineConfig({
6 | plugins: [reactRouter(), tsconfigPaths()],
7 | });
8 |
--------------------------------------------------------------------------------
/playground/vite-plugin-cloudflare/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | /node_modules/
3 | *.tsbuildinfo
4 |
5 | # React Router
6 | /.react-router/
7 | /build/
8 |
9 | # Cloudflare
10 | .mf
11 | .wrangler
12 |
--------------------------------------------------------------------------------
/playground/vite-plugin-cloudflare/app/root.tsx:
--------------------------------------------------------------------------------
1 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
2 |
3 | export default function App() {
4 | return (
5 | <html lang="en">
6 | <head>
7 | <meta charSet="utf-8" />
8 | <meta name="viewport" content="width=device-width, initial-scale=1" />
9 | <Meta />
10 | <Links />
11 | </head>
12 | <body>
13 | <Outlet />
14 | <ScrollRestoration />
15 | <Scripts />
16 | </body>
17 | </html>
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/playground/vite-plugin-cloudflare/app/routes.ts:
--------------------------------------------------------------------------------
1 | import { type RouteConfig } from "@react-router/dev/routes";
2 | import { flatRoutes } from "@react-router/fs-routes";
3 |
4 | export default flatRoutes() satisfies RouteConfig;
5 |
--------------------------------------------------------------------------------
/playground/vite-plugin-cloudflare/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/playground/vite-plugin-cloudflare/public/favicon.ico
--------------------------------------------------------------------------------
/playground/vite-plugin-cloudflare/react-router.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "@react-router/dev/config";
2 |
3 | export default {
4 | future: {
5 | unstable_viteEnvironmentApi: true,
6 | },
7 | } satisfies Config;
8 |
--------------------------------------------------------------------------------
/playground/vite-plugin-cloudflare/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [],
3 | "references": [
4 | { "path": "./tsconfig.node.json" },
5 | { "path": "./tsconfig.cloudflare.json" }
6 | ],
7 | "compilerOptions": {
8 | "checkJs": true,
9 | "verbatimModuleSyntax": true,
10 | "skipLibCheck": true,
11 | "strict": true,
12 | "noEmit": true
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/playground/vite-plugin-cloudflare/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "include": ["react-router.config.ts", "vite.config.ts"],
4 | "compilerOptions": {
5 | "composite": true,
6 | "strict": true,
7 | "types": ["node"],
8 | "lib": ["ES2022"],
9 | "target": "ES2022",
10 | "module": "ES2022",
11 | "moduleResolution": "bundler"
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/playground/vite-plugin-cloudflare/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { defineConfig } from "vite";
3 | import tsconfigPaths from "vite-tsconfig-paths";
4 | import { cloudflare } from "@cloudflare/vite-plugin";
5 |
6 | export default defineConfig({
7 | plugins: [
8 | cloudflare({ viteEnvironment: { name: "ssr" } }),
9 | reactRouter(),
10 | tsconfigPaths(),
11 | ],
12 | });
13 |
--------------------------------------------------------------------------------
/playground/vite-plugin-cloudflare/wrangler.toml:
--------------------------------------------------------------------------------
1 | name = "react-router-app"
2 | compatibility_date = "2025-03-17"
3 | main = "./workers/app.ts"
4 |
5 | assets = {}
6 |
7 | [vars]
8 | VALUE_FROM_CLOUDFLARE = "Hello from Cloudflare"
9 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - "integration"
3 | - "integration/helpers/*"
4 | - "packages/*"
5 | - "playground/*"
6 |
--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @type {import('prettier').Options}
3 | */
4 | module.exports = {};
5 |
--------------------------------------------------------------------------------
/scripts/clean-v6-artifacts.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | set -e
4 |
5 | pnpm clean
6 |
7 | echo "Removing v6 artifacts..."
8 | set -x
9 | rm -rf packages/react-router-dom-v5-compat/
10 | rm -f packages/react-router-dom/server.*
11 | set +x
12 |
13 | echo "Installing and building..."
14 | pnpm install --frozen-lockfile
15 | pnpm build
--------------------------------------------------------------------------------
/scripts/constants.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 |
3 | const ROOT_DIR = path.resolve(__dirname, "..");
4 | const EXAMPLES_DIR = path.resolve(ROOT_DIR, "examples");
5 |
6 | module.exports = {
7 | ROOT_DIR,
8 | EXAMPLES_DIR,
9 | };
10 |
--------------------------------------------------------------------------------
/static/base-branch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/static/base-branch.png
--------------------------------------------------------------------------------
/tutorials/address-book/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | /node_modules/
3 |
4 | # React Router
5 | /.react-router/
6 | /build/
7 |
--------------------------------------------------------------------------------
/tutorials/address-book/app/routes.ts:
--------------------------------------------------------------------------------
1 | import type { RouteConfig } from "@react-router/dev/routes";
2 |
3 | export default [] satisfies RouteConfig;
4 |
--------------------------------------------------------------------------------
/tutorials/address-book/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/react-router/eb19c3fae9e72aee3cfafb78bc87cae64c3b725b/tutorials/address-book/public/favicon.ico
--------------------------------------------------------------------------------
/tutorials/address-book/react-router.config.ts:
--------------------------------------------------------------------------------
1 | import { type Config } from "@react-router/dev/config";
2 |
3 | export default {
4 | ssr: false,
5 | } satisfies Config;
6 |
--------------------------------------------------------------------------------
/tutorials/address-book/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import { defineConfig } from "vite";
3 |
4 | export default defineConfig({
5 | plugins: [reactRouter()],
6 | });
7 |
--------------------------------------------------------------------------------
/typedoc.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "React Router API Reference",
3 | "entryPoints": ["packages/*"],
4 | "entryPointStrategy": "packages",
5 | "includeVersion": false,
6 | "json": "./public/dev/api.json",
7 | "out": "./public/dev",
8 | "hostedBaseUrl": "https://api.reactrouter.com/dev/"
9 | }
10 |
--------------------------------------------------------------------------------