Update dependency react-router-dom to v6
This PR contains the following updates:
| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| react-router-dom | ^5 -> ^6.0.0 |
Release Notes
remix-run/react-router
v6.9.0
Minor Changes
-
React Router now supports an alternative way to define your route
elementanderrorElementfields as React Components instead of React Elements. You can instead pass a React Component to the newComponentandErrorBoundaryfields if you choose. There is no functional difference between the two, so use whichever approach you prefer 😀. You shouldn't be defining both, but if you doComponent/ErrorBoundarywill "win". (#10045)Example JSON Syntax
// Both of these work the same: const elementRoutes = [{ path: '/', element: <Home />, errorElement: <HomeError />, }] const componentRoutes = [{ path: '/', Component: Home, ErrorBoundary: HomeError, }] function Home() { ... } function HomeError() { ... }Example JSX Syntax
// Both of these work the same: const elementRoutes = createRoutesFromElements( <Route path='/' element={<Home />} errorElement={<HomeError /> } /> ); const componentRoutes = createRoutesFromElements( <Route path='/' Component={Home} ErrorBoundary={HomeError} /> ); function Home() { ... } function HomeError() { ... } -
Introducing Lazy Route Modules! (#10045)
In order to keep your application bundles small and support code-splitting of your routes, we've introduced a new
lazy()route property. This is an async function that resolves the non-route-matching portions of your route definition (loader,action,element/Component,errorElement/ErrorBoundary,shouldRevalidate,handle).Lazy routes are resolved on initial load and during the
loadingorsubmittingphase of a navigation or fetcher call. You cannot lazily define route-matching properties (path,index,children) since we only execute your lazy route functions after we've matched known routes.Your
lazyfunctions will typically return the result of a dynamic import.// In this example, we assume most folks land on the homepage so we include that // in our critical-path bundle, but then we lazily load modules for /a and /b so // they don't load until the user navigates to those routes let routes = createRoutesFromElements( <Route path="/" element={<Layout />}> <Route index element={<Home />} /> <Route path="a" lazy={() => import("./a")} /> <Route path="b" lazy={() => import("./b")} /> </Route> );Then in your lazy route modules, export the properties you want defined for the route:
export async function loader({ request }) { let data = await fetchData(request); return json(data); } // Export a `Component` directly instead of needing to create a React Element from it export function Component() { let data = useLoaderData(); return ( <> <h1>You made it!</h1> <p>{data}</p> </> ); } // Export an `ErrorBoundary` directly instead of needing to create a React Element from it export function ErrorBoundary() { let error = useRouteError(); return isRouteErrorResponse(error) ? ( <h1> {error.status} {error.statusText} </h1> ) : ( <h1>{error.message || error}</h1> ); }An example of this in action can be found in the
examples/lazy-loading-router-providerdirectory of the repository.🙌 Huge thanks to @rossipedia for the Initial Proposal and POC Implementation.
-
Updated dependencies:
[email protected]@remix-run/[email protected]
v6.8.2
Patch Changes
- Treat same-origin absolute URLs in
<Link to>as external if they are outside of the routerbasename(#10135) - Fix
useBlockerto returnIDLE_BLOCKERduring SSR (#10046) - Fix SSR of absolute
<Link to>urls (#10112) - Properly escape HTML characters in
StaticRouterProviderserialized hydration data (#10068) - Updated dependencies:
@remix-run/[email protected][email protected]
v6.8.1
Patch Changes
- Improved absolute url detection in
Linkcomponent (now also supportsmailto:urls) (#9994) - Fix partial object (search or hash only) pathnames losing current path value (#10029)
- Updated dependencies:
[email protected]@remix-run/[email protected]
v6.8.0
Minor Changes
-
Support absolute URLs in
<Link to>. If the URL is for the current origin, it will still do a client-side navigation. If the URL is for a different origin then it will do a fresh document request for the new origin. (#9900)<Link to="https://neworigin.com/some/path"> {/* Document request */} <Link to="//neworigin.com/some/path"> {/* Document request */} <Link to="https://www.currentorigin.com/path"> {/* Client-side navigation */}
Patch Changes
- Fix bug with search params removal via
useSearchParams(#9969) - Respect
preventScrollReseton<fetcher.Form>(#9963) - Fix navigation for hash routers on manual URL changes (#9980)
- Use
pagehideinstead ofbeforeunloadfor<ScrollRestoration>. This has better cross-browser support, specifically on Mobile Safari. (#9945) - Updated dependencies:
@remix-run/[email protected][email protected]
v6.7.0
Minor Changes
- Add
unstable_useBlockerhook for blocking navigations within the app's location origin (#9709) - Add
unstable_usePrompthook for blocking navigations within the app's location origin (#9932) - Add
preventScrollResetprop to<Form>(#9886)
Patch Changes
- Added pass-through event listener options argument to
useBeforeUnload(#9709) - Streamline jsdom bug workaround in tests (#9824)
- Updated dependencies:
@remix-run/[email protected][email protected]
v6.6.2
Patch Changes
- Ensure
useIdconsistency during SSR (#9805) - Updated dependencies:
v6.6.1
Patch Changes
- Updated dependencies:
@remix-run/[email protected][email protected]
v6.6.0
Minor Changes
- Add
useBeforeUnload()hook (#9664) - Remove
unstable_prefix fromcreateStaticHandler/createStaticRouter/StaticRouterProvider(#9738)
Patch Changes
- Proper hydration of
Errorobjects fromStaticRouterProvider(#9664) - Support uppercase
<Form method>anduseSubmitmethod values (#9664) - Skip initial scroll restoration for SSR apps with
hydrationData(#9664) - Fix
<button formmethod>form submission overriddes (#9664) - Updated dependencies:
@remix-run/[email protected][email protected]
v6.5.0
Patch Changes
- Updated dependencies:
[email protected]@remix-run/[email protected]
v6.4.5
Patch Changes
- Updated dependencies:
@remix-run/[email protected][email protected]
v6.4.4
Patch Changes
- Fix issues with encoded characters in
NavLinkand descendant<Routes>(#9589, #9647) - Properly serialize/deserialize
ErrorResponseinstances when using built-in hydration (#9593) - Support
basenamein static data routers (#9591) - Updated dependencies:
@remix-run/[email protected][email protected]
v6.4.3
Patch Changes
- Fix hrefs generated for
createHashRouter(#9409) - fix encoding/matching issues with special chars (#9477, #9496)
- Properly support
indexroutes with apathinuseResolvedPath(#9486) - Respect
relative=pathprop onNavLink(#9453) - Fix
NavLinkbehavior for root urls (#9497) - Updated dependencies:
@remix-run/[email protected][email protected]
v6.4.2
Patch Changes
- Respect
basenameinuseFormAction(#9352) - Enhance console error messages for invalid usage of data router hooks (#9311)
- If an index route has children, it will result in a runtime error. We have strengthened our
RouteObject/RoutePropstypes to surface the error in TypeScript. (#9366) - Updated dependencies:
[email protected]@remix-run/[email protected]
v6.4.1
Patch Changes
- Updated dependencies:
[email protected]@remix-run/[email protected]
v6.4.0
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, especially the feature overview and the tutorial.
New APIs
- Create your router with
createMemoryRouter/createBrowserRouter/createHashRouter - Render your router with
<RouterProvider> - Load data with a Route
loaderand mutate with a Routeaction - 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
deferandAwait - Manage scroll position with
<ScrollRestoration>
New Features
- Perform path-relative navigations with
<Link relative="path">(#9160)
Bug Fixes
- Path resolution is now trailing slash agnostic (#8861)
useLocationreturns the scoped location inside a<Routes location>component (#9094)- respect the
<Link replace>prop if it is defined (#8779)
Updated Dependencies
v6.3.0: [email protected]
What's Changed
- Added the v5 to v6 backwards compatibility package 💜 (https://github.com/remix-run/react-router/pull/8752). The official guide can be found in this discussion
New Contributors
- @mfijas made their first contribution in https://github.com/remix-run/react-router/pull/8717
- @ThornWu made their first contribution in https://github.com/remix-run/react-router/pull/8718
- @janpaepke made their first contribution in https://github.com/remix-run/react-router/pull/8651
- @rtmann made their first contribution in https://github.com/remix-run/react-router/pull/8725
Full Changelog: https://github.com/remix-run/react-router/compare/v6.2.2...v6.3.0
v6.2.2
What's Changed
🐛 Bug Fixes
- Fixed nested splat routes that begin with special URL-safe characters (#8563)
- Fixed a bug where index routes were missing route context in some cases (#8497)
New Contributors
- @chasinhues made their first contribution in https://github.com/remix-run/react-router/pull/8514
- @underager made their first contribution in https://github.com/remix-run/react-router/pull/8531
- @kantuni made their first contribution in https://github.com/remix-run/react-router/pull/8537
- @ArjaanBuijk made their first contribution in https://github.com/remix-run/react-router/pull/8536
- @jmargeta made their first contribution in https://github.com/remix-run/react-router/pull/8548
- @koojaa made their first contribution in https://github.com/remix-run/react-router/pull/8542
- @chrisngobanh made their first contribution in https://github.com/remix-run/react-router/pull/8576
- @ChristopherChudzicki made their first contribution in https://github.com/remix-run/react-router/pull/8582
- @awreese made their first contribution in https://github.com/remix-run/react-router/pull/8596
- @bhbs made their first contribution in https://github.com/remix-run/react-router/pull/8601
- @LukerSpringtree made their first contribution in https://github.com/remix-run/react-router/pull/8619
- @hsbtr made their first contribution in https://github.com/remix-run/react-router/pull/8476
- @abhi-kr-2100 made their first contribution in https://github.com/remix-run/react-router/pull/8658
- @cvbuelow made their first contribution in https://github.com/remix-run/react-router/pull/8663
- @hyesungoh made their first contribution in https://github.com/remix-run/react-router/pull/8666
- @BrianT1414 made their first contribution in https://github.com/remix-run/react-router/pull/8667
- @IbraRouisDev made their first contribution in https://github.com/remix-run/react-router/pull/8683
- @shihanng made their first contribution in https://github.com/remix-run/react-router/pull/8689
- @latin-1 made their first contribution in https://github.com/remix-run/react-router/pull/8529
- @Isammoc made their first contribution in https://github.com/remix-run/react-router/pull/8533
- @KutnerUri made their first contribution in https://github.com/remix-run/react-router/pull/8278
- @shamsup made their first contribution in https://github.com/remix-run/react-router/pull/8563
- @brophdawg11 made their first contribution in https://github.com/remix-run/react-router/pull/8691
Full Changelog: https://github.com/remix-run/react-router/compare/v6.2.1...v6.2.2
v6.2.1
This release updates the internal history dependency to 5.2.0.
Full Changelog: https://github.com/remix-run/react-router/compare/v6.2.0...v6.2.1
v6.2.0
🐛 Bug fixes
- Fixed the
RoutePropselementtype, which should be aReactNode(#8473) - Fixed a bug with
useOutletfor top-level routes (#8483)
✨ Features
- We now use statically analyzable CJS exports. This enables named imports in Node ESM scripts (See the commit).
New Contributors
- @thisiskartik made their first contribution in https://github.com/remix-run/react-router/pull/8487
- @vijaypushkin made their first contribution in https://github.com/remix-run/react-router/pull/8491
Full Changelog: https://github.com/remix-run/react-router/compare/v6.1.1...v6.2.0
v6.1.1
In v6.1.0 we inadvertently shipped a new, undocumented API that will likely introduce bugs (#7586). We have flagged HistoryRouter as unstable_HistoryRouter, as this API will likely need to change before a new major release.
Full Changelog: https://github.com/remix-run/react-router/compare/v6.1.0...v6.1.1
v6.1.0
🐛 Bug fixes
- Fixed a bug that broke support for base64 encoded IDs on nested routes (#8291)
✨ Features
<Outlet>can now receive acontextprop. This value is passed to child routes and is accessible via the newuseOutletContexthook. See the API docs for details. (#8461)<NavLink>can now receive a child function for access to its props. (#8164)
💅 Enhancements
- Improved TypeScript signature for
useMatchandmatchPath. For example, when you calluseMatch("foo/:bar/:baz"), the path is parsed and the return type will bePathMatch<"bar" | "baz">. (#8030) - A few error message improvements (#8202)
New Contributors
- @rwieruch made their first contribution in https://github.com/remix-run/react-router/pull/8244
- @codeiotic made their first contribution in https://github.com/remix-run/react-router/pull/8247
- @Sannnao made their first contribution in https://github.com/remix-run/react-router/pull/8263
- @mattmazzola made their first contribution in https://github.com/remix-run/react-router/pull/8255
- @ngokevin made their first contribution in https://github.com/remix-run/react-router/pull/8267
- @TimisRobert made their first contribution in https://github.com/remix-run/react-router/pull/8269
- @mikeldking made their first contribution in https://github.com/remix-run/react-router/pull/8279
- @fishmandev made their first contribution in https://github.com/remix-run/react-router/pull/8289
- @rjerue made their first contribution in https://github.com/remix-run/react-router/pull/8304
- @rockingskier made their first contribution in https://github.com/remix-run/react-router/pull/8314
- @arinthros made their first contribution in https://github.com/remix-run/react-router/pull/8337
- @noisypigeon made their first contribution in https://github.com/remix-run/react-router/pull/8361
- @elylucas made their first contribution in https://github.com/remix-run/react-router/pull/8368
- @paulsmithkc made their first contribution in https://github.com/remix-run/react-router/pull/8357
- @sanketshah19 made their first contribution in https://github.com/remix-run/react-router/pull/8372
- @JakubDrozd made their first contribution in https://github.com/remix-run/react-router/pull/8402
- @markivancho made their first contribution in https://github.com/remix-run/react-router/pull/8414
- @turansky made their first contribution in https://github.com/remix-run/react-router/pull/8420
- @shivamsinghchahar made their first contribution in https://github.com/remix-run/react-router/pull/8423
- @petersendidit made their first contribution in https://github.com/remix-run/react-router/pull/8436
- @Ajayff4 made their first contribution in https://github.com/remix-run/react-router/pull/8373
- @RobHannay made their first contribution in https://github.com/remix-run/react-router/pull/8455
- @kddnewton made their first contribution in https://github.com/remix-run/react-router/pull/8030
- @brockross made their first contribution in https://github.com/remix-run/react-router/pull/8462
- @sergiodxa made their first contribution in https://github.com/remix-run/react-router/pull/8164
- @baozouai made their first contribution in https://github.com/remix-run/react-router/pull/8171
- @liuhanqu made their first contribution in https://github.com/remix-run/react-router/pull/8374
Full Changelog: https://github.com/remix-run/react-router/compare/v6.0.1...v6.1.0
v6.0.2
✨ Features
- Added the
reloadDocumentprop to<Link>. This allows<Link>to function like a normal anchor tag by reloading the document after navigation while maintaining the relativetoresolution.
🗒️ Docs
- Fixed several issues in docblocks and the docs themselves. See the full changelog for the deets!
🤝 New Contributors
- @rwieruch made their first contribution in https://github.com/remix-run/react-router/pull/8244
- @ProProgrammer2504 made their first contribution in https://github.com/remix-run/react-router/pull/8247
- @Sannnao made their first contribution in https://github.com/remix-run/react-router/pull/8263
- @mattmazzola made their first contribution in https://github.com/remix-run/react-router/pull/8255
- @ngokevin made their first contribution in https://github.com/remix-run/react-router/pull/8267
- @TimisRobert made their first contribution in https://github.com/remix-run/react-router/pull/8269
- @mikeldking made their first contribution in https://github.com/remix-run/react-router/pull/8279
- @fishmandev made their first contribution in https://github.com/remix-run/react-router/pull/8289
Full Changelog
v6.0.1
🐛 Bug Fixes
- Add a default
<StaticRouter location>value (#8243) - Add invariant for using
<Route>inside<Routes>to help people make the change (#8238)
v6.0.0
React Router v6 is here!
Please go read our blog post for more information on all the great stuff in v6 including notes about how to upgrade from React Router v5 and Reach Router.
v5.3.4
We removed the mini-create-react-context dependency, moving it into an internal module to eliminate peer dependency warnings for users on React 18 (#9382).
Full Changelog: https://github.com/remix-run/react-router/compare/v5.3.3...v5.3.4
v5.3.3
This release fixes a bad version selector in react-router-native.
v5.3.2
- Fix: make v5 Router compatible with v18 StrictMode by @jgoz in https://github.com/remix-run/react-router/pull/8831
v5.3.1
This release adds missing LICENSE files to the published build.
v5.3.0
This release of react-router-dom adds support for passing a function to either the className or style props to conditionally apply values based on the link's active state.
This provides similar functionality as the existing activeClassName and activeStyle props, but is a bit more powerful. For example, you can now easily apply styles exclusively to an inactive NavLink as well. This offers a nicer experience for folks who use utility class-based CSS tools such as Tailwind.
function Comp() {
return (
<NavLink
to="/"
className={isActive =>
`px-3 py-2 ${isActive ? 'text-gray-200' : 'text-gray-800'}`
}
>
Home
</NavLink>
);
}
Note that as of v6.0.0-beta.3, the activeClassName and activeStyle props are removed completely. Adding support for functional className and style props to both v5 and v6 will give v5 users an easier upgrade path.
Thanks to @tim-phillips for raising the issue that inspired the change! 🥳
v5.2.1
This release fixes a bug with <Link> so that, when the to location is the same as the current, the history state entry is replaced instead of pushed to the stack. See https://github.com/remix-run/react-router/issues/5362 for details. 🥳
Thanks to @guidobouman for the PR and for everyone else who weighed in for the fix!
v5.2.0
This release includes a notable performance boost by separating the "Router" context from the "History" context internally. We also allow every element type for Link's component prop and support a sensitive prop on NavLink for control over case sensitive matching.
Enjoy!
Changes
- Add
sensitiveprop on NavLink (#7251 by @caseywebdev) - Fix Link
componentprop type check (#7276 by @ypyakymiv) - Update
mini-create-react-context(#7288 by @patricksmms) - Separate
historyto its own context (#7103 by @illuminist)
Configuration
📅 Schedule: Branch creation - "before 3am on Monday" (UTC), Automerge - At any time (no schedule defined).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about this update again.
- [ ] If you want to rebase/retry this PR, check this box
This PR has been generated by Mend Renovate. View repository job log here.
✔️ Deploy Preview for firefox-performance-dashboard ready!
🔨 Explore the source changes: c11a8a6ce0679bf191e25264dab35662cb7953bd
🔍 Inspect the deploy log: https://app.netlify.com/sites/firefox-performance-dashboard/deploys/618882ce8e04b9000719b4ef
😎 Browse the preview: https://deploy-preview-446--firefox-performance-dashboard.netlify.app/
Codecov Report
Merging #446 (c11a8a6) into master (016ad29) will not change coverage. The diff coverage is
n/a.
@@ Coverage Diff @@
## master #446 +/- ##
=======================================
Coverage 85.47% 85.47%
=======================================
Files 14 14
Lines 351 351
Branches 53 53
=======================================
Hits 300 300
Misses 46 46
Partials 5 5
Continue to review full report at Codecov.
Legend - Click here to learn more
Δ = absolute <relative> (impact),ø = not affected,? = missing dataPowered by Codecov. Last update 016ad29...c11a8a6. Read the comment docs.
Edited/Blocked Notification
Renovate will not automatically rebase this PR, because it does not recognize the last commit author and assumes somebody else may have edited the PR.
You can manually request rebase by checking the rebase/retry box above.
⚠️ Warning: custom changes will be lost.