Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-router-dom
Advanced tools
react-router-dom - npm Package Compare versions
Comparing version 6.4.0-pre.15 to 6.4.0
227
CHANGELOG.md
| # react-router-dom | ||
| ## 6.4.0-pre.15 | ||
| ## 6.4.0 | ||
| ### Patch Changes | ||
| Whoa this is a big one! `6.4.0` brings all the data loading and mutation APIs over from Remix. Here's a quick high level overview, but it's recommended you go check out the [docs][rr-docs], especially the [feature overview][rr-feature-overview] and the [tutorial][rr-tutorial]. | ||
| - fix: remove internal router singleton (#9227) | ||
| **New APIs** | ||
| This change removes the internal module-level `routerSingleton` we create and maintain inside our data routers since it was causing a number of headaches for non-simple use cases: | ||
| - Create your router with `createMemoryRouter`/`createBrowserRouter`/`createHashRouter` | ||
| - Render your router with `<RouterProvider>` | ||
| - Load data with a Route `loader` and mutate with a Route `action` | ||
| - Handle errors with Route `errorElement` | ||
| - Submit data with the new `<Form>` component | ||
| - Perform in-page data loads and mutations with `useFetcher()` | ||
| - Defer non-critical data with `defer` and `Await` | ||
| - Manage scroll position with `<ScrollRestoration>` | ||
| - Unit tests are a pain because you need to find a way to reset the singleton in-between tests | ||
| - Use use a `_resetModuleScope` singleton for our tests | ||
| - ...but this isn't exposed to users who may want to do their own tests around our router | ||
| - The JSX children `<Route>` objects cause non-intuitive behavior based on idiomatic react expectations | ||
| - Conditional runtime `<Route>`'s won't get picked up | ||
| - Adding new `<Route>`'s during local dev won't get picked up during HMR | ||
| - Using external state in your elements doesn't work as one might expect (see #9225) | ||
| **New Features** | ||
| Instead, we are going to lift the singleton out into user-land, so that they create the router singleton and manage it outside the react tree - which is what react 18 is encouraging with `useSyncExternalStore` anyways! This also means that since users create the router - there's no longer any difference in the rendering aspect for memory/browser/hash routers (which only impacts router/history creation) - so we can get rid of those and trim to a simple `RouterProvider` | ||
| - Perform path-relative navigations with `<Link relative="path">` (#9160) | ||
| ```jsx | ||
| // Before | ||
| function App() { | ||
| <DataBrowserRouter> | ||
| <Route path="/" element={<Layout />}> | ||
| <Route index element={<Home />}> | ||
| </Route> | ||
| <DataBrowserRouter> | ||
| } | ||
| **Bug Fixes** | ||
| // After | ||
| let router = createBrowserRouter([{ | ||
| path: "/", | ||
| element: <Layout />, | ||
| children: [{ | ||
| index: true, | ||
| element: <Home />, | ||
| }] | ||
| }]); | ||
| - Path resolution is now trailing slash agnostic (#8861) | ||
| - `useLocation` returns the scoped location inside a `<Routes location>` component (#9094) | ||
| - respect the `<Link replace>` prop if it is defined (#8779) | ||
| function App() { | ||
| return <RouterProvider router={router} /> | ||
| } | ||
| ``` | ||
| **Updated Dependencies** | ||
| If folks still prefer the JSX notation, they can leverage `createRoutesFromElements` (aliased from `createRoutesFromChildren` since they are not "children" in this usage): | ||
| - react-router@6.4.0 | ||
| ```jsx | ||
| let routes = createRoutesFromElements( | ||
| <Route path="/" element={<Layout />}> | ||
| <Route index element={<Home />}> | ||
| </Route> | ||
| ); | ||
| let router = createBrowserRouter(routes); | ||
| function App() { | ||
| return <RouterProvider router={router} /> | ||
| } | ||
| ``` | ||
| And now they can also hook into HMR correctly for router disposal: | ||
| ``` | ||
| if (import.meta.hot) { | ||
| import.meta.hot.dispose(() => router.dispose()); | ||
| } | ||
| ``` | ||
| And finally since `<RouterProvider>` accepts a router, it makes unit testing easer since you can create a fresh router with each test. | ||
| **Removed APIs** | ||
| - `<DataMemoryRouter>` | ||
| - `<DataBrowserRouter>` | ||
| - `<DataHashRouter>` | ||
| - `<DataRouterProvider>` | ||
| - `<DataRouter>` | ||
| **Modified APIs** | ||
| - `createMemoryRouter`/`createBrowserRouter`/`createHashRouter` used to live in `@remix-run/router` to prevent devs from needing to create their own `history`. These are now moved to `react-router`/`react-router-dom` and handle the `RouteObject -> AgnosticRouteObject` conversion. | ||
| **Added APIs** | ||
| - `<RouterProvider>` | ||
| - `createRoutesFromElements` (alias of `createRoutesFromChildren`) | ||
| - Updated dependencies | ||
| - react-router@6.4.0-pre.15 | ||
| ## 6.4.0-pre.14 | ||
| ### Patch Changes | ||
| - fix: rename resetScroll -> preventScrollReset (#9199) | ||
| - Updated dependencies | ||
| - react-router@6.4.0-pre.14 | ||
| ## 6.4.0-pre.13 | ||
| ### Patch Changes | ||
| - fix: pass `useMatches` objects to `ScrollRestoration` `getKey` (#9157) | ||
| - feat: add `relative=path` option for url-relative routing (#9160) | ||
| Adds a `relative=path` option to navigation aspects to allow users to opt-into paths behaving relative to the current URL instead of the current route hierarchy. This is useful if you're sharing route patterns in a non-nested structure for UI reasons: | ||
| ```jsx | ||
| // Contact and EditContact do not share UI layout | ||
| <Route path="contacts/:id" element={<Contact />} /> | ||
| <Route path="contacts:id/edit" element={<EditContact />} /> | ||
| function EditContact() { | ||
| return <Link to=".." relative="path">Cancel</Link> | ||
| } | ||
| ``` | ||
| Without this, the user would need to reconstruct the `contacts/:id` url using `useParams` and either hardcoding the `/contacts` prefix or parsing it from `useLocation`. | ||
| This applies to all path-related hooks and components: | ||
| - `react-router`: `useHref`, `useResolvedPath`, `useNavigate`, `Navigate` | ||
| - `react-router-dom`: `useLinkClickHandler`, `useFormAction`, `useSubmit`, `Link`, `Form` | ||
| - `react-router-native`: `useLinkPressHandler`, `Link` | ||
| - fix: `useFormAction` should not include pathless splat portion (#9144) | ||
| - Updated dependencies | ||
| - react-router@6.4.0-pre.13 | ||
| ## 6.4.0-pre.12 | ||
| ### Patch Changes | ||
| - fix: do not overwrite input value from button with same name (#9139) | ||
| - fix: unspecified `<Form>` action should preserve search params (#9060) | ||
| - Updated dependencies | ||
| - react-router@6.4.0-pre.12 | ||
| ## 6.4.0-pre.11 | ||
| ### Patch Changes | ||
| - Updated dependencies [c3406eb9] | ||
| - react-router@6.4.0-pre.11 | ||
| ## 6.4.0-pre.10 | ||
| ### Patch Changes | ||
| - SSR Updates for React Router (#9058) | ||
| _Note: The Data-Router SSR aspects of `@remix-run/router` and `react-router-dom` are being released as **unstable** in this release (`unstable_createStaticHandler` and `unstable_DataStaticRouter`), and we plan to finalize them in a subsequent minor release once the kinks can be worked out with the Remix integration. To that end, they are available for use, but are subject to breaking changes in the next minor release._ | ||
| - Remove `useRenderDataRouter()` in favor of `<DataRouterProvider>`/`<DataRouter>` | ||
| - Support automatic hydration in `<DataStaticRouter>`/`<DataBrowserRouter>`/`<DataHashRouter>` | ||
| - Uses `window.__staticRouterHydrationData` | ||
| - Can be disabled on the server via `<DataStaticRouter hydrate={false}>` | ||
| - Can be disabled (or overridden) in the browser by passing `hydrationData` to `<DataBrowserRouter>`/`<DataHashRouter>` | ||
| - `<DataStaticRouter>` now tracks it's own SSR error boundaries on `StaticHandlerContext` | ||
| - `StaticHandlerContext` now exposes `statusCode`/`loaderHeaders`/`actionHeaders` | ||
| - `foundMissingHydrationData` check removed since Remix routes may have loaders (for modules) that don't return data for `loaderData` | ||
| - Updated dependencies | ||
| - react-router@6.4.0-pre.10 | ||
| ## 6.4.0-pre.9 | ||
| ### Patch Changes | ||
| - feat: add basename support for data routers (#9026) | ||
| - Updated dependencies | ||
| - react-router@6.4.0-pre.9 | ||
| ## 6.4.0-pre.8 | ||
| ### Patch Changes | ||
| - fix: Make path resolution trailing slash agnostic (#8861) | ||
| - fix: export ActionFunctionArgs/LoaderFunctionArgs up through router packages (#8975) | ||
| - Updated dependencies | ||
| - react-router@6.4.0-pre.8 | ||
| ## 6.4.0-pre.7 | ||
| ### Patch Changes | ||
| - Respect the `<Link replace>` prop if it is defined (#8779) | ||
| - Updated dependencies | ||
| - `react-router@6.4.0-pre.7` | ||
| ## 6.4.0-pre.6 | ||
| ### Patch Changes | ||
| - Updated dependencies | ||
| - `react-router@6.4.0-pre.6` | ||
| ## 6.4.0-pre.5 | ||
| ### Patch Changes | ||
| - Fix broken require for CJS builds | ||
| - Updated dependencies | ||
| - `react-router@6.4.0-pre.5` | ||
| ## 6.4.0-pre.4 | ||
| ### Patch Changes | ||
| - Fix missing `dist` files | ||
| ## 6.4.0-pre.3 | ||
| ### Patch Changes | ||
| - Make `fallbackElement` optional and change type to `ReactNode` (type changes only) (#8896) | ||
| - Properly trigger error boundaries on 404 routes | ||
| [rr-docs]: https://reactrouter.com/ | ||
| [rr-feature-overview]: https://reactrouter.com/en/v6.4.0/start/overview | ||
| [rr-tutorial]: https://reactrouter.com/en/v6.4.0/start/tutorial |
| /** | ||
| * React Router DOM v6.4.0-pre.15 | ||
| * React Router DOM v6.4.0 | ||
| * | ||
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc. |
| /** | ||
| * React Router DOM v6.4.0-pre.15 | ||
| * React Router DOM v6.4.0 | ||
| * | ||
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc. |
| /** | ||
| * React Router DOM v6.4.0-pre.15 | ||
| * React Router DOM v6.4.0 | ||
| * | ||
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc. |
| /** | ||
| * React Router DOM v6.4.0-pre.15 | ||
| * React Router DOM v6.4.0 | ||
| * | ||
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc. |
| /** | ||
| * React Router DOM v6.4.0-pre.15 | ||
| * React Router DOM v6.4.0 | ||
| * | ||
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc. |
| /** | ||
| * React Router DOM v6.4.0-pre.15 | ||
| * React Router DOM v6.4.0 | ||
| * | ||
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc. |
| { | ||
| "name": "react-router-dom", | ||
| "version": "6.4.0-pre.15", | ||
| "version": "6.4.0", | ||
| "description": "Declarative routing for React web applications", | ||
@@ -26,3 +26,3 @@ "keywords": [ | ||
| "dependencies": { | ||
| "react-router": "6.4.0-pre.15" | ||
| "react-router": "6.4.0" | ||
| }, | ||
@@ -45,3 +45,6 @@ "devDependencies": { | ||
| "server.mjs" | ||
| ] | ||
| ], | ||
| "engines": { | ||
| "node": ">=14" | ||
| } | ||
| } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Number of low quality alerts
- decreased by-33.33%
2
Worsened metrics
- Total package byte prevSize
- decreased by-1.25%
465578
Dependency changes
+ Added@remix-run/router@1.0.0(transitive)
+ Addedreact-router@6.4.0(transitive)
- Removed@remix-run/router@0.2.0-pre.10(transitive)
- Removedreact-router@6.4.0-pre.15(transitive)
Updatedreact-router@6.4.0