housekeeping: Update react-router monorepo to v6.14.1 #2733
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR contains the following updates:
6.0.0-beta.0
->6.14.1
6.0.0-beta.0
->6.14.1
Release Notes
remix-run/react-router (react-router)
v6.14.1
Compare Source
Patch Changes
unstable_useBlocker
when used with an unstable blocker function (#10652)@remix-run/[email protected]
v6.14.0
Compare Source
Patch Changes
basename
from locations provided tounstable_useBlocker
functions to matchuseLocation
(#10573)generatePath
when passed a numeric0
value parameter (#10612)unstable_useBlocker
key issues inStrictMode
(#10573)tsc --skipLibCheck:false
issues on React 17 (#10622)typescript
to 5.1 (#10581)@remix-run/[email protected]
v6.13.0
Compare Source
Minor Changes
Move
React.startTransition
usage behind a future flag to avoid issues with existing incompatibleSuspense
usages. We recommend folks adopting this flag to be better compatible with React concurrent mode, but if you run into issues you can continue without the use ofstartTransition
until v7. Issues usually boils down to creating net-new promises during the render cycle, so if you run into issues you should either lift your promise creation out of the render cycle or put it behind auseMemo
. (#10596)Existing behavior will no longer include
React.startTransition
:If you wish to enable
React.startTransition
, pass the future flag to your component:Patch Changes
React.startTransition
minification bug in production mode (#10588)v6.12.1
Compare Source
Patch Changes
React.startTransition
to fix webpack + react 17 compilation error (#10569)v6.12.0
Compare Source
Minor Changes
React.startTransition
if it exists (#10438)Patch Changes
@remix-run/[email protected]
v6.11.2
Compare Source
Patch Changes
basename
duplication in descendant<Routes>
inside a<RouterProvider>
(#10492)@remix-run/[email protected]
v6.11.1
Compare Source
Patch Changes
Component
API within descendant<Routes>
(#10434)useNavigate
from<Routes>
inside a<RouterProvider>
(#10432)<Navigate>
in strict mode when using a data router (#10435)@remix-run/[email protected]
v6.11.0
Compare Source
Patch Changes
<Routes>
whenRouterProvider
errors existed (#10374)Component
instead ofelement
on a route definition (#10287)useNavigate
in the render cycle by setting theactiveRef
in a layout effect, allowing thenavigate
function to be passed to child components and called in auseEffect
there. (#10394)useSyncExternalStore
touseState
for internal@remix-run/router
router state syncing in<RouterProvider>
. We found some subtle bugs where router state updates got propagated before other normaluseState
updates, which could lead to footguns inuseEffect
calls. (#10377, #10409)useRevalidator()
to resolve a loader-driven error boundary scenario (#10369)RouterProvider
,useNavigate
/useSubmit
/fetcher.submit
are now stable across location changes, since we can handle relative routing via the@remix-run/router
instance and get rid of our dependence onuseLocation()
. When usingBrowserRouter
, these hooks remain unstable across location changes because they still rely onuseLocation()
. (#10336)@remix-run/[email protected]
v6.10.0
Compare Source
Minor Changes
Added support for Future Flags in React Router. The first flag being introduced is
future.v7_normalizeFormMethod
which will normalize the exposeduseNavigation()/useFetcher()
formMethod
fields as uppercase HTTP methods to align with thefetch()
behavior. (#10207)future.v7_normalizeFormMethod === false
(default v6 behavior),useNavigation().formMethod
is lowercaseuseFetcher().formMethod
is lowercasefuture.v7_normalizeFormMethod === true
:useNavigation().formMethod
is uppercaseuseFetcher().formMethod
is uppercasePatch Changes
createRoutesFromElements
(#10193)@remix-run/[email protected]
v6.9.0
Compare Source
Minor Changes
React Router now supports an alternative way to define your route
element
anderrorElement
fields as React Components instead of React Elements. You can instead pass a React Component to the newComponent
andErrorBoundary
fields 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
/ErrorBoundary
will "win". (#10045)Example JSON Syntax
Example JSX Syntax
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
loading
orsubmitting
phase 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
lazy
functions will typically return the result of a dynamic import.Then in your lazy route modules, export the properties you want defined for the route:
An example of this in action can be found in the
examples/lazy-loading-router-provider
directory of the repository.🙌 Huge thanks to @rossipedia for the Initial Proposal and POC Implementation.
Updated dependencies:
@remix-run/[email protected]
Patch Changes
generatePath
incorrectly applying parameters in some cases (#10078)v6.8.2
Compare Source
Patch Changes
@remix-run/[email protected]
v6.8.1
Compare Source
Patch Changes
@remix-run/[email protected]
v6.8.0
Compare Source
Patch Changes
@remix-run/[email protected]
v6.7.0
Compare Source
Minor Changes
unstable_useBlocker
hook for blocking navigations within the app's location origin (#9709)Patch Changes
generatePath
when optional params are present (#9764)<Await>
to acceptReactNode
as children function return result (#9896)@remix-run/[email protected]
v6.6.2
Compare Source
Patch Changes
useId
consistency during SSR (#9805)v6.6.1
Compare Source
Patch Changes
@remix-run/[email protected]
v6.6.0
Compare Source
Patch Changes
useLoaderData
usage inerrorElement
(#9735)@remix-run/[email protected]
v6.5.0
Compare Source
This release introduces support for Optional Route Segments. Now, adding a
?
to the end of any path segment will make that entire segment optional. This works for both static segments and dynamic parameters.Optional Params Examples
<Route path=":lang?/about>
will match:/:lang/about
/about
<Route path="/multistep/:widget1?/widget2?/widget3?">
will match:/multistep
/multistep/:widget1
/multistep/:widget1/:widget2
/multistep/:widget1/:widget2/:widget3
Optional Static Segment Example
<Route path="/home?">
will match:/
/home
<Route path="/fr?/about">
will match:/about
/fr/about
Minor Changes
Patch Changes
<Route path="prefix-:param">
, to align with how splat parameters work. If you were previously relying on this behavior then it's recommended to extract the static portion of the path at theuseParams
call site: (#9506)@remix-run/[email protected]
v6.4.5
Compare Source
Patch Changes
@remix-run/[email protected]
v6.4.4
Compare Source
Patch Changes
@remix-run/[email protected]
v6.4.3
Compare Source
Patch Changes
useRoutes
should be able to returnnull
when passinglocationArg
(#9485)initialEntries
type increateMemoryRouter
(#9498)@remix-run/[email protected]
v6.4.2
Compare Source
Patch Changes
IndexRouteObject
andNonIndexRouteObject
types to makehasErrorElement
optional (#9394)RouteObject
/RouteProps
types to surface the error in TypeScript. (#9366)@remix-run/[email protected]
v6.4.1
Compare Source
Patch Changes
initialEntries
(#9288)@remix-run/[email protected]
v6.4.0
Compare Source
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
createMemoryRouter
<RouterProvider>
loader
and mutate with a Routeaction
errorElement
defer
andAwait
Bug Fixes
useLocation
returns the scoped location inside a<Routes location>
component (#9094)Updated Dependencies
@remix-run/[email protected]
v6.3.0
: [email protected]Compare Source
What's Changed
New Contributors
Full Changelog: remix-run/react-router@v6.2.2...v6.3.0
v6.2.2
Compare Source
What's Changed
🐛 Bug Fixes
New Contributors
Full Changelog: remix-run/react-router@v6.2.1...v6.2.2
v6.2.1
Compare Source
This release updates the internal
history
dependency to5.2.0
.Full Changelog: remix-run/react-router@v6.2.0...v6.2.1
v6.2.0
Compare Source
🐛 Bug fixes
RouteProps
element
type, which should be aReactNode
(#8473)useOutlet
for top-level routes (#8483)✨ Features
New Contributors
Full Changelog: remix-run/react-router@v6.1.1...v6.2.0
v6.1.1
Compare Source
In v6.1.0 we inadvertently shipped a new, undocumented API that will likely introduce bugs (#7586). We have flagged
HistoryRouter
asunstable_HistoryRouter
, as this API will likely need to change before a new major release.Full Changelog: remix-run/react-router@v6.1.0...v6.1.1
v6.1.0
Compare Source
🐛 Bug fixes
✨ Features
<Outlet>
can now receive acontext
prop. This value is passed to child routes and is accessible via the newuseOutletContext
hook. See the API docs for details. (#8461)<NavLink>
can now receive a child function for access to its props. (#8164)💅 Enhancements
useMatch
andmatchPath
. For example, when you calluseMatch("foo/:bar/:baz")
, the path is parsed and the return type will bePathMatch<"bar" | "baz">
. (#8030)New Contributors
Full Changelog: remix-run/react-router@v6.0.1...v6.1.0
v6.0.2
Compare Source
✨ Features
reloadDocument
prop to<Link>
. This allows<Link>
to function like a normal anchor tag by reloading the document after navigation while maintaining the relativeto
resolution.🗒️ Docs
🤝 New Contributors
Full Changelog
v6.0.1
Compare Source
🐛 Bug Fixes
<StaticRouter location>
value (#8243)<Route>
inside<Routes>
to help people make the change (#8238)v6.0.0
Compare Source
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.
v6.0.0-beta.8
Compare Source
Remember last week when we said
Yeah, about that … 😅
We found and squashed a few high-priority bugs that needed to be addressed first. But it's coming very soon, we promise! In the mean time, here's what you'll get from our eight-est and greatest beta release:
🐛 Bug Fixes
useHref
that resulted in the incorrect resolved value in cases where abasename
is used on the<Router />
component (See #8133 and #8142 for details).*
path value) are now correctly ranked ahead of layout routes.🗒️ Docs
We've added lots of goodies to our
docs
andexamples
, and there's a lot more yet to come. Take a look and see if you find something that makes your work a little easier! We think the lazy loading and custom query parsing examples are particularly cool! 🤓v6.0.0-beta.7
Compare Source
In this release we made a small but significant change to how
<Link to="..">
works. This is going to help out a lot if you were trying to use links in a*
route.We have also backed out our blocking/prompt APIs for the stable v6 release. We will revisit this post 6.0 when we have a little more time to get it right.
✨ Features
The major change in this release could also be classified as a bugfix or a breaking change, depending on how you look at it. We essentialy altered the way
<Link to="..">
works. See #8086 for the motivation behind this change.You'll probably want to reread the section in the v5 => v6 migration guide about
<Link to>
values (it has been updated), but it basically boils down to this: any leading..
segment in a<Link to>
value traverses "up" one route and builds upon that route's path instead of just removing one URL segment. This feature really completes the story of relative routes and links.We could consider this a bugfix, since this is how it was always intended to work in the first place. Without it, you'd have a difficult time linking predictably in
*
routes because your<a href>
would be different depending on the number of segments in the current URL.The reason this could also be considered a breaking change is that
..
now works slightly differently in<Link to>
than it would in<a href>
. When you have<a href="..">
it operates on the URL pathname, removing one segment of the current URL. However, since many routes really only match a single segment of the URL, there is often no difference between<Link to="..">
and<a href="..">
.💔 Breaking Changes
useBlocker()
,usePrompt()
, and<Prompt>
for now. We will revisit these post 6.0 when we have more time to get it right. But we don't want it to block (see what I did there) the release of all the other awesome stuff we've got in v6.🛠 Roadmap
We anticipate this will be the last beta release before v6 stable next week. Please give it a shot and let us know how it goes!
👍 Upgrading
If you're thinking about upgrading to v6, I published a few notes this past week that may help you:
<Redirect>
elements from any<Switch>
es you may have in your v5 app and how you can get better SEO in the process if you're currently relying on client-side redirects.<Route>
elements, which won't work in v6.Both of those posts contain steps you can take today in your v5 app without upgrading to v6.
We are also developing a backwards compat lib that should help some of you upgrade from v5 to v6. We'll post more about this when it's ready.
💻 Installing
Development for v6 has switched from
dev
to themain
branch.If you'd like to test it out, install from npm:
$ npm install history react-router-dom@next
v6.0.0-beta.6
Compare Source
No big enhancements in this release, just squashing bugs and writing lots of tests! Also, we are hard at work on cranking out examples for v6. See the end of this post for an update on our roadmap between here and v6 stable.
🧰 Examples
We have begun creating some examples for v6 that we hope will help developers make effective use of all the new features we have. So far, we have examples for the following:
<Outlet>
APIuseNavigate()
hook, the<Navigate>
element, andlocation.state
useSearchParams()
hook<StaticRouter>
on the server and uses a<BrowserRouter>
withReactDOM.hydrate()
on the clientEach example includes a button in the README that allows you to instantly launch a running instance on StackBlitz that you can play with. We hope you enjoy exploring!
🐛 Bugfixes
<NavLink>
match only whole URL segments instead of pieces. This means that<NavLink to="/home/users">
will still be active at/home/users
, but not at/home/users2
. See #7523path
) never match unless one of their children do. See #8085af7d038
<Routes>
. This reverses a decision that we made in beta.5 to remove them. See #8073💔 Breaking Changes
*
) match only after a/
in the URL. This means that<Route path="files*">
will always match as if it were<Route path="files/*">
. The router will issue a warning if your route path ends with*
but not/*
🛠 Roadmap
We are very close to a stable release! The last big code changes we need to make are:
<Link to="..">
operates on the URL pathname. However, this makes it difficult to link to the parent route when you're in a splat route. See #8086. This will be a breaking change.useBlocker()
and<Prompt>
in our initial v6 release, with plans to revisit them and possibly add them back at some point in the future. I still need to write up something here that explains our rationale. This will also be a breaking change.<Routes location>
prop will be in v6, but it isn't ideal for animation.💻 Installing
Development for v6 is chugging along on the
dev
branch.If you'd like to test it out, install from npm:
$ npm install history react-router-dom@next
v6.0.0-beta.5
Compare Source
This week's release adds some much-needed polish to a few niche features of the router: splat routes (a route that uses a
*
path) and basenames. It also adds arenderMatches
API that completes the story for those of you who may have been usingreact-router-config
in v4 and v5.🐛 Bugfixes
*
in a child route path matches after a slash following its parent route path. This fixes some situations where the*
was overly greedy (see #7972)<Link to=".">
anduseResolvedPath(".")
values are fixed in splat routes. Previously these resolved relative to the parent route's path. They now resolve relative to the path of the route that rendered them.✨ Enhancements
This release makes it easier to work with apps that have multiple entry points. Using the
<Router basename>
prop allows React Router to be easily deployed on only a portion of a larger site by using a portion of the URL pathname (the "basename") to transparently prefix all route paths and link navigations.For example, you can deploy one React Router app at the
/inbox
URL prefix, and another one at the/admin
prefix. These base URLs represent two different entry points into your app, each with its own bundles. The rest of your site, including the root / URL could be rendered by something other than React Router, for example by your server framework of choice.In the bundle for each entry point, simply initialize React Router with the basename of that entry point.
Then define your routes and link paths without using the
/inbox
URL prefix in any of them. The entire app will run relative to that prefix.Another improvement in this release is the addition of the
renderMatches
API, which is the complement ofmatchRoutes
. These APIs are both very low-level and should not normally be needed. But they are sometimes nice to use if you are doing your own data loading using the array ofmatches
that you get back frommatchRoutes
.matchRoutes
andrenderMatches
are the equivalent of thereact-router-config
package we shipped in v4 and v5, just built directly into the router instead of in a separate package.💔 Breaking Changes
<Routes basename>
has moved to<Router basename>
. This prop is also available on all router variants (<BrowserRouter>
,<HashRouter>
, etc.).useLocation().pathname
no longer includes the basename, if present.basename
argument was removed fromuseRoutes
. This reverts the signature touseRoutes(routes, location)
, same as it was previous to beta.4.<Routes>
do not get the params from their parents. This helps a set of<Routes>
to be more portable by decoupling it from the params of its parents and makes it easier to know which params will be returned fromuseParams()
. If you were relying on this behavior previously, you'll need to pass along the params manually to the elements rendered by the descendant<Routes>
. See this comment for an example of how this is to be done and for a potential workaround if you really need the old behavior.match.pathname
in a splat route now includes the portion of the pathname matched by the*
. This makes the*
param behave much more like other dynamic:id
-style params.<Link>
s in splat routes is changed now because the entire pathname that was matched by that route is now different (see previous bullet). Instead of resolving relative to the portion of the pathname before the*
, paths resolve relative to the full pathname that was matched by the route.💻 Installing
Development for v6 is chugging along on the
dev
branch.If you'd like to test it out, install from npm:
$ npm install history react-router-dom@next
v6.0.0-beta.4
Compare Source
Last week we released a lot of nice little bug features, but we did get a little carried away and let a little bug slip through with relative path resolution. Our bad! That nasty lil' guy is squashed in this week's beta. 🐛
And there's more! Let's dive in…
🐛 Bugfixes
✨ Enhancements
Params
type which is now generic, so you can add your own types if you know what to expect from functions that return query parameters. (#8019)There was quite a bit of discussion in #7335 from people who are using constants to define their route paths. In this style, paths are often written as absolute paths from the root
/
URL. These constants are then able to be used both in<Route path>
definitions as well as<Link to>
values. It usually looks something like this:This style of use is now fully supported in v6. This is great for people who write their apps like this, but it technically could cause some breakage if you were using absolute paths (that start with
/
) in nested routes in previous betas. To fix this, simply remove the/
from the beginning of any route paths that are meant to be relative. React Router will throw an error if you are using absolute paths that don't match their parent route paths. Hopefully this should help you fConfiguration
📅 Schedule: Branch creation - "every 2 week 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 these updates again.
This PR has been generated by Mend Renovate. View repository job log here.