Add experimental support for the View Transitions API via document.startViewTransition to enable CSS animated transitions on SPA navigations in your application. (#10916)
The simplest approach to enabling a View Transition in your React Router app is via the new <Link unstable_viewTransition> prop. This will cause the navigation DOM update to be wrapped in document.startViewTransition which will enable transitions for the DOM update. Without any additional CSS styles, you'll get a basic cross-fade animation for your page.
If you need to apply more fine-grained styles for your animations, you can leverage the unstable_useViewTransitionState hook which will tell you when a transition is in progress and you can use that to apply classes or styles:
You can also use the <NavLink unstable_viewTransition> shorthand which will manage the hook usage for you and automatically add a transitioning class to the <a> during the transition:
Please note, that because the ViewTransition API is a DOM API, we now export a specific RouterProvider from react-router-dom with this functionality. If you are importing RouterProvider from react-router, then it will not support view transitions. (#10928
Patch Changes
Log a warning and fail gracefully in ScrollRestoration when sessionStorage is unavailable (#10848)
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- `@dependabot show ignore conditions` will show all of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
Bumps react-router-dom from 6.13.0 to 6.17.0.
Release notes
Sourced from react-router-dom's releases.
... (truncated)
Changelog
Sourced from react-router-dom's changelog.
... (truncated)
Commits
edd9ad4
chore: Update version for release (#10935)6cfbd0e
chore: Update version for release (pre) (#10934)c48341d
Lift startViewTransition implementation to react-router-dom (#10928)b916689
chore: Update version for release (pre) (#10931)b09c5d0
chore: Update version for release (pre) (#10924)feebfc0
Add startViewTransition support (#10916)da57748
fix(docs): add backticks to element names (#10874)f8194fd
Handle case when session storage is blocked (#10848)13fb25a
chore: Update version for release (#10866)6bd6fb9
chore: Update version for release (pre) (#10849)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show