├── .browserslistrc ├── .changeset ├── README.md └── config.json ├── .eslintignore ├── .eslintrc ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.yml │ ├── config.yml │ └── documentation_isse.yml ├── dependabot.yml └── workflows │ ├── 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.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 │ ├── hooks │ │ ├── index.md │ │ ├── unstable_usePrompt.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 │ │ ├── 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 │ ├── code-splitting.md │ ├── hot-module-replacement.md │ ├── hydration.md │ ├── index.md │ ├── location.md │ ├── picking-a-router.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 │ ├── 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 │ ├── react-server-components.md │ ├── resource-routes.md │ ├── route-module-type-safety.md │ ├── search-params.md │ ├── security.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 └── 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-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 │ │ ├── worker-configuration.d.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 │ │ │ ├── tar.js │ │ │ ├── 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 │ │ └── serverModes.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 │ │ └── utils.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 │ │ ├── typecheck.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 │ ├── .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 │ ├── worker-configuration.d.ts │ ├── workers │ └── app.ts │ └── wrangler.toml ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── prettier.config.js ├── scripts ├── clean-v6-artifacts.sh ├── 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 | /integration/helpers/vite-plugin-cloudflare-template/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/ServerRouter.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ServerRouter 3 | --- 4 | 5 | # ServerRouter 6 | 7 | [MODES: framework] 8 | 9 | ## Summary 10 | 11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.ServerRouter.html) 12 | 13 | Rendered at the top of the app in a custom entry.server.tsx. 14 | 15 | ## Props 16 | 17 | ### context 18 | 19 | [modes: framework] 20 | 21 | _No documentation_ 22 | 23 | ### nonce 24 | 25 | [modes: framework] 26 | 27 | _No documentation_ 28 | 29 | ### url 30 | 31 | [modes: framework] 32 | 33 | _No documentation_ 34 | -------------------------------------------------------------------------------- /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 | --- 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 `` 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 | --- 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 | 23 | 24 | ; 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 | ``. 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 `` 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 ``. 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/data.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: data 3 | --- 4 | 5 | # data 6 | 7 | [MODES: framework, data] 8 | 9 | ## Summary 10 | 11 | [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.data.html) 12 | 13 | Create "responses" that contain `status`/`headers` without forcing 14 | serialization into an actual `Response` - used by Remix single fetch 15 | 16 | ## Signature 17 | 18 | ```tsx 19 | data(data, init): DataWithResponseInit 20 | ``` 21 | 22 | ## Params 23 | 24 | ### data 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/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 | 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 | 7 | -------------------------------------------------------------------------------- /docs/explanation/picking-a-router.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Picking a Router 3 | hidden: true 4 | --- 5 | 6 | ## TODO: 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 | 9 | This document is a work in progress. There's not much to see here (yet). 10 | 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 | 2 | 3 | 4 | 5 | 6 | React Router - Auth Example 7 | 8 | 9 |
10 | 11 | 12 | 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 | 9 | 10 | 11 | ); 12 | -------------------------------------------------------------------------------- /examples/auth-router-provider/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 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 | 2 | 3 | 4 | 5 | 6 | React Router - Auth Example 7 | 8 | 9 |
10 | 11 | 12 | 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 | 10 | 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /examples/auth/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 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 ``. 10 | 11 | ## Preview 12 | 13 | Open this example on [StackBlitz](https://stackblitz.com): 14 | 15 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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 | 2 | 3 | 4 | 5 | 6 | React Router - Basic Data Router Example 7 | 8 | 9 |
10 | 11 | 12 | 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 | 7 | 8 | 9 | ); 10 | -------------------------------------------------------------------------------- /examples/basic-data-router/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 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 | 2 | 3 | 4 | 5 | 6 | React Router - Basic Example 7 | 8 | 9 |
10 | 11 | 12 | 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 | 10 | 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /examples/basic/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 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 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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 | 2 | 3 | 4 | 5 | 6 | React Router - Custom Filter Link Example 7 | 8 | 9 |
10 | 11 | 12 | 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 | 10 | 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /examples/custom-filter-link/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 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 `` 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 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router/tree/main/examples/custom-link?file=src/App.tsx) 15 | -------------------------------------------------------------------------------- /examples/custom-link/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React Router - Custom Link Example 7 | 8 | 9 |
10 | 11 | 12 | 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 | 10 | 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /examples/custom-link/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 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 | 2 | 3 | 4 | 5 | 6 | React Router - Custom Query Parsing Example 7 | 8 | 9 |
10 | 11 | 12 | 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 | 10 | 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /examples/custom-query-parsing/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 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 | null | undefined; 3 | export function stringify(input: any): string; 4 | export function parse(input?: Nullable): Nullable; 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 | - and
navigations 14 | - submissions 15 | 16 | ## Preview 17 | 18 | Open this example on [StackBlitz](https://stackblitz.com): 19 | 20 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router/tree/main/examples/data-router?file=src/App.tsx) 21 | -------------------------------------------------------------------------------- /examples/data-router/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React Router - Basic Example 7 | 8 | 9 |
10 | 11 | 12 | 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 | 7 | 8 | 9 | ); 10 | -------------------------------------------------------------------------------- /examples/data-router/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 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 | 2 | 3 | 4 | 5 | 6 | React Router - Error Boundaries Example 7 | 8 | 9 |
10 | 11 | 12 | 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 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /examples/error-boundaries/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 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 | 2 | 3 | 4 | 5 | 6 | React Router - Lazy Loading Example using RouterProvider 7 | 8 | 9 |
10 | 11 | 12 | 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 | 9 | 10 | 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 |
13 |

About

14 |

{data}

15 |
16 | ); 17 | } 18 | 19 | Component.displayName = "AboutPage"; 20 | -------------------------------------------------------------------------------- /examples/lazy-loading-router-provider/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 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 | 2 | 3 | 4 | 5 | 6 | React Router - Lazy Loading Example 7 | 8 | 9 |
10 | 11 | 12 | 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 | 10 | 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /examples/lazy-loading/src/pages/About.tsx: -------------------------------------------------------------------------------- 1 | function AboutPage() { 2 | return ( 3 |
4 |

About

5 |
6 | ); 7 | } 8 | 9 | export default AboutPage; 10 | -------------------------------------------------------------------------------- /examples/lazy-loading/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 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 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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 | 2 | 3 | 4 | 5 | 6 | React Router - Modal Example 7 | 8 | 9 |
10 | 11 | 12 | 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 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /examples/modal-route-with-outlet/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 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 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router/tree/main/examples/modal?file=src/App.tsx) 13 | -------------------------------------------------------------------------------- /examples/modal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React Router - Modal Example 7 | 8 | 9 |
10 | 11 | 12 | 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 | 10 | 11 | 12 | 13 | , 14 | document.getElementById("root") 15 | ); 16 | -------------------------------------------------------------------------------- /examples/modal/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 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 | 9 | {/* No basename for this router. This app renders at the root / URL. */} 10 | 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /examples/multi-app/home/no-match.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | 3 | function NoMatch() { 4 | return ( 5 |
6 |

Nothing to see here!

7 |

8 | Go to the home page of the app 9 |

10 |
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 | 2 | 3 | 4 | 5 | 6 | 7 | React Router - Multi App Example (Inbox App) 8 | 9 | 10 |
11 | 12 | 13 | 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 | 9 | {/* "Mount" this app under the /inbox URL pathname. All routes and links 10 | are relative to this name. */} 11 | 12 | 13 | 14 | 15 | ); 16 | -------------------------------------------------------------------------------- /examples/multi-app/inbox/no-match.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | 3 | function NoMatch() { 4 | return ( 5 |
6 |

Nothing to see here!

7 |

8 | Go to the home page of the app 9 |

10 |
11 | ); 12 | } 13 | 14 | export { NoMatch }; 15 | -------------------------------------------------------------------------------- /examples/multi-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React Router - Multi App Example (Home App) 8 | 9 | 10 |
11 | 12 | 13 | 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 | 2 | 3 | 4 | 5 | 6 | React Router - Navigation Blocking 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/navigation-blocking/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "navigation-blocking", 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.21.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/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 | 7 | 8 | 9 | ); 10 | -------------------------------------------------------------------------------- /examples/navigation-blocking/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 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 | - and navigations 14 | 15 | ## Preview 16 | 17 | Open this example on [StackBlitz](https://stackblitz.com): 18 | 19 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router/tree/dev/examples/notes?file=src/App.jsx) 20 | -------------------------------------------------------------------------------- /examples/notes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React Router - Basic Example 7 | 8 | 9 |
10 | 11 | 12 | 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 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /examples/notes/src/routes/notes.jsx: -------------------------------------------------------------------------------- 1 | export default function Notes() { 2 | return
Notes
; 3 | } 4 | -------------------------------------------------------------------------------- /examples/notes/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 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 | 2 | 3 | 4 | 5 | 6 | React Router - Route Objects Example 7 | 8 | 9 |
10 | 11 | 12 | 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 | 10 | 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /examples/route-objects/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 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 | 2 | 3 | 4 | 5 | 6 | React Router - Basic Example 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/scroll-restoration/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "scroll-restoration", 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/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 | 7 | 8 | 9 | ); 10 | -------------------------------------------------------------------------------- /examples/scroll-restoration/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 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 | 2 | 3 | 4 | 5 | 6 | React Router - Search Params Example 7 | 8 | 9 |
10 | 11 | 12 | 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 | 10 | 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /examples/search-params/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 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 | 2 | 3 | 4 | 5 | 6 | React Router - Data Router SSR Example 7 | 8 | 9 | 10 |
11 | 12 | 13 | 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 => { 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 |

Lazy Route

20 |

Date from loader: {data.date}

21 | 22 | ); 23 | } 24 | 25 | export const element = ; 26 | -------------------------------------------------------------------------------- /examples/ssr-data-router/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 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 | 2 | 3 | 4 | 5 | 6 | React Router - SSR Example 7 | 8 | 9 |
10 | 11 | 12 | 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 | 11 | 12 | 13 | 14 | 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 | 10 | 11 | 12 | 13 | 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 | /// 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 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router/tree/main/examples/view-transitions?file=src/App.tsx) 15 | -------------------------------------------------------------------------------- /examples/view-transitions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React Router - Basic Data Router Example 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/view-transitions/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.17.0-pre.2" 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/view-transitions/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 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 |
13 |

Welcome to React Router + Cloudflare

14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /integration/helpers/cloudflare-dev-proxy-template/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remix-run/react-router/c06ec85cf05e0ec5a3f399160ae3512206fac980/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 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 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 |
13 |

Welcome to React Router

14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /integration/helpers/vite-5-template/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /integration/helpers/vite-5-template/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remix-run/react-router/c06ec85cf05e0ec5a3f399160ae3512206fac980/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 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 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 |
13 |

Welcome to React Router

14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /integration/helpers/vite-6-template/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /integration/helpers/vite-6-template/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remix-run/react-router/c06ec85cf05e0ec5a3f399160ae3512206fac980/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-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 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 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 |
13 |

Welcome to React Router

14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /integration/helpers/vite-plugin-cloudflare-template/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remix-run/react-router/c06ec85cf05e0ec5a3f399160ae3512206fac980/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 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 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 |
13 |

Welcome to React Router

14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /integration/helpers/vite-rolldown-template/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /integration/helpers/vite-rolldown-template/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remix-run/react-router/c06ec85cf05e0ec5a3f399160ae3512206fac980/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

Welcome to React Router

; 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/c06ec85cf05e0ec5a3f399160ae3512206fac980/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/c06ec85cf05e0ec5a3f399160ae3512206fac980/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/c06ec85cf05e0ec5a3f399160ae3512206fac980/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/c06ec85cf05e0ec5a3f399160ae3512206fac980/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/c06ec85cf05e0ec5a3f399160ae3512206fac980/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: ["/__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/c06ec85cf05e0ec5a3f399160ae3512206fac980/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 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 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 |
13 |

Welcome to React Router

14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /packages/react-router-dev/__tests__/fixtures/basic/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remix-run/react-router/c06ec85cf05e0ec5a3f399160ae3512206fac980/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 | (() => Promise) 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 | 9 | 10 | 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/config/serverModes.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 isValidServerMode(mode: string): mode is ServerMode { 11 | return ( 12 | mode === ServerMode.Development || 13 | mode === ServerMode.Production || 14 | mode === ServerMode.Test 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /packages/react-router-dev/invariant.ts: -------------------------------------------------------------------------------- 1 | export default function invariant( 2 | value: boolean, 3 | message?: string 4 | ): asserts value; 5 | 6 | export default function invariant( 7 | value: T | null | undefined, 8 | message?: string 9 | ): asserts value is T; 10 | 11 | export default function invariant(value: any, message?: string) { 12 | if (value === false || value === null || typeof value === "undefined") { 13 | console.error( 14 | "The following error is a bug in React Router; please open an issue! https://github.com/remix-run/react-router/issues/new/choose" 15 | ); 16 | throw new Error(message); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /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: ["/__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 = {}; 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.split(path.win32.sep).join("/"); 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/__tests__/utils.ts: -------------------------------------------------------------------------------- 1 | import prettier from "prettier"; 2 | 3 | export function prettyHtml(source: string): string { 4 | return prettier.format(source, { parser: "html" }); 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", "install.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.split(path.win32.sep).join("/"); 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

Lazy

; 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 15 | | React.FunctionComponentElement[], 16 | node: ReactDOM.Container 17 | ): void { 18 | ReactDOM.render({element}, 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 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: ["/__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; 8 | 9 | export function RouterProvider(props: Omit) { 10 | return ; 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( 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 = 9 | { 10 | params: Params; 11 | loaderData: GetLoaderData; 12 | actionData: GetActionData; 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 = 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 |
13 |

Welcome to React Router

14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /playground/framework-express/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remix-run/react-router/c06ec85cf05e0ec5a3f399160ae3512206fac980/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

Hello, {loaderData.planet}!

; 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

{loaderData.name}

; 9 | } 10 | -------------------------------------------------------------------------------- /playground/framework-rolldown-vite/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remix-run/react-router/c06ec85cf05e0ec5a3f399160ae3512206fac980/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-rolldown-vite/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { reactRouter } from "@react-router/dev/vite"; 2 | import { defineConfig, type UserConfig } from "vite"; 3 | import tsconfigPaths from "vite-tsconfig-paths"; 4 | 5 | export default defineConfig(({ isSsrBuild }) => { 6 | const config: UserConfig = { 7 | plugins: [ 8 | // @ts-expect-error `dev` depends on Vite 6, Plugin type is mismatched. 9 | reactRouter(), 10 | tsconfigPaths(), 11 | ], 12 | build: { 13 | // Built-in minifier is still experimental 14 | minify: isSsrBuild ? false : "esbuild", 15 | }, 16 | }; 17 | 18 | return config; 19 | }); 20 | -------------------------------------------------------------------------------- /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 |
13 |

Welcome to React Router

14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /playground/framework-spa/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remix-run/react-router/c06ec85cf05e0ec5a3f399160ae3512206fac980/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

Hello, {loaderData.planet}!

; 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

{loaderData.name}

; 9 | } 10 | -------------------------------------------------------------------------------- /playground/framework-vite-5/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remix-run/react-router/c06ec85cf05e0ec5a3f399160ae3512206fac980/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/.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

Hello, {loaderData.planet}!

; 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

{loaderData.name}

; 9 | } 10 | -------------------------------------------------------------------------------- /playground/framework/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remix-run/react-router/c06ec85cf05e0ec5a3f399160ae3512206fac980/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("default"); 4 | export const rootContext = unstable_createContext(); 5 | export const aContext = unstable_createContext(); 6 | export const bContext = unstable_createContext("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/c06ec85cf05e0ec5a3f399160ae3512206fac980/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/c06ec85cf05e0ec5a3f399160ae3512206fac980/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/c06ec85cf05e0ec5a3f399160ae3512206fac980/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 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 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/c06ec85cf05e0ec5a3f399160ae3512206fac980/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/c06ec85cf05e0ec5a3f399160ae3512206fac980/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/c06ec85cf05e0ec5a3f399160ae3512206fac980/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 | --------------------------------------------------------------------------------