Remix Routers is a collection of libraries that port react-router-dom
(version 6.4 - currently in prerelease) to different UI rendering libraries, all based on the underlying @remix-run/router
package. This only exists for Vue and Svelte at the moment but we hope to see that expand in the future (with community support 😉).
If you're not familiar with the concepts of the Remix Router, we would highly recommend reading/watching the following to provide some background:
- 📖 Remixing React Router
- 📹 When to Fetch: Remixing React Router (Reactathon 2022)
- 📹 Why the Form: Data Mutations on the Web (RenderATL 2022)
- 📖 React Router Tutorial
- This is likely the best way to get your hands dirty and learn the APIs
Warning
These projects are in an early stage so use with caution!
Please refer to the documentation for the UI library of your choice:
For simplicity and to keep things consistent between react-router-dom
and these implementations, these implementations follow a few guidelines:
- Implementations only provide data routers (no
BrowserRouter
,HashRouter
, etc.) - Implementations will not provide any new APIs that are not in
react-router-dom
- Implementations will likely not provide all public APIs of
react-router-dom
- Some APIs may not be as relevant in a data-router-only landscape
- Some APIs may not be compatible with a given UI library
- Implementations will remain as close to the
react-router-dom
behavior as possible, barring differences that are unavoidable due to UI library implementation details- To this end, each package in this repository will implement the same reference app that must pass a shared Cypress test suite
- SSR is not something we intend to handle in these implementations, at least for now
In the interest of time (for now), please refer to the docs for react-router@6.4
for API references since we're aiming to be API compatible. The following table documents the current state of the UI libraries and the APIs implemented. If you find cases where these packages are not API compatible, please open an issue (or better yet, a pull request!).
Legend: ✅ (Included), ⏳ (Coming soon), ❌ (Not planned), Empty (Status unknown)
API | React Router | Vue | Svelte |
---|---|---|---|
ROUTE | - | - | - |
action |
✅ | ✅ | ✅ |
caseSensitive |
✅ | ✅ | ✅ |
children |
✅ | ✅ | ✅ |
element |
✅ | ✅ | ✅ |
errorElement |
✅ | ✅ | |
id |
✅ | ✅ | ✅ |
index |
✅ | ✅ | ✅ |
loader |
✅ | ✅ | ✅ |
path |
✅ | ✅ | ✅ |
shouldRevalidate |
✅ | ✅ | ✅ |
COMPONENTS | - | - | |
Await |
✅ | ✅ | |
Form |
✅ | ✅ | ✅ |
Link |
✅ | ✅ | ✅ |
NavLink |
✅ | ⏳ | |
Navigate |
✅ | ||
Outlet |
✅ | ✅ | ✅ |
Route |
✅ | ❌ | ❌ |
Routes |
✅ | ❌ | ❌ |
ScrollRestoration |
✅ | ⏳ | |
ROUTERS | - | - | |
createBrowserRouter |
✅ | ✅ | ✅ |
createHashRouter |
✅ | ✅ | ✅ |
createMemoryRouter |
✅ | ✅ | ✅ |
BrowserRouter |
✅ | ❌ | ❌ |
HashRouter |
✅ | ❌ | ❌ |
HistoryRouter |
✅ | ❌ | ❌ |
MemoryRouter |
✅ | ❌ | ❌ |
NativeRouter |
✅ | ❌ | ❌ |
Router |
✅ | ❌ | ❌ |
RouterProvider |
✅ | ✅ | ✅ |
StaticRouter |
✅ | ❌ | ❌ |
HOOKS | - | - | - |
useActionData |
✅ | ✅ | ⏳ |
useAsyncValue |
✅ | ⏳ | |
useAsyncError |
✅ | ⏳ | |
useFetcher |
✅ | ✅ | ✅ |
useFetchers |
✅ | ✅ | ⏳ |
useFormAction |
✅ | ✅ | ✅ |
useHref |
✅ | ✅ | |
useInRouterContext |
✅ | ||
useLinkClickHandler |
✅ | ||
useLinkPressHandler |
✅ | ||
useLoaderData |
✅ | ✅ | ✅ |
useLocation |
✅ | ✅ | ✅ |
useMatch |
✅ | ||
useMatches |
✅ | ✅ | ✅ |
useNavigate |
✅ | ✅ | ✅ |
useNavigation |
✅ | ✅ | ✅ |
useNavigationType |
✅ | ✅ | ✅ |
useOutlet |
✅ | ||
useOutletContext |
✅ | ||
useParams |
✅ | ||
useResolvedPath |
✅ | ✅ | |
useRevalidator |
✅ | ⏳ | |
useRouteError |
✅ | ✅ | |
useRouteLoaderData |
✅ | ✅ | ✅ |
useRoutes |
✅ | ❌ | |
useSearchParams |
✅ | ||
useSubmit |
✅ | ✅ | |
FETCH UTILITIES | - | - | |
json |
✅ | ✅ | |
redirect |
✅ | ✅ | |
UTILITIES | - | - | |
createRoutesFromChildren |
✅ | ❌ | ❌ |
createSearchParams |
✅ | ||
defer |
✅ | ✅ | |
generatePath |
✅ | ||
isRouteErrorResponse |
✅ | ✅ | |
matchPath |
✅ | ||
matchRoutes |
✅ | ||
renderMatches |
✅ | ||
resolvePath |
✅ |
We welcome contributions from the community! Feel free to open issues and/or PRs and if you have any questions specific to a framework, please reach out to the following "leads":
- Vue - @brophdawg11
- Svelte - @austincrim
This repository uses yarn workspaces, and each implementation should be a new packages/{library}
workspace. Each implementation should provide the following:
- A
package.json
with at leastbuild
andintegration
scripts - A
src/
folder containing the UI implementation - A
reference-app/
folder containing the reference application - A
vite.config.ts
configuration to build the library (viavite build
) and also serve the reference app (viavite dev
)