We recently published a post over on the Remix Blog titled "Future Proofing Your Remix App" that goes through our strategy to ensure smooth upgrades for your Remix and React Router apps going forward. React Router 6.10.0 adds support for these flags (for data routers) which you can specify when you create your router:
The first future flag being introduced is future.v7_normalizeFormMethod which will normalize the exposed useNavigation()/useFetcher()formMethod fields as uppercase HTTP methods to align with the fetch() (and some Remix) behavior. (#10207)
When future.v7_normalizeFormMethod is unspecified or set to false (default v6 behavior),
useNavigation().formMethod is lowercase
useFetcher().formMethod is lowercase
When future.v7_normalizeFormMethod === true:
useNavigation().formMethod is UPPERCASE
useFetcher().formMethod is UPPERCASE
Patch Changes
Fix createStaticHandler to also check for ErrorBoundary on routes in addition to errorElement (#10190)
Fix route ID generation when using Fragments in createRoutesFromElements (#10193)
Provide fetcher submission to shouldRevalidate if the fetcher action redirects (#10208)
Properly handle lazy() errors during router initialization (#10201)
Remove instanceof check for DeferredData to be resilient to ESM/CJS boundaries in SSR bundling scenarios (#10247)
Update to latest @remix-run/web-fetch@4.3.3 (#10216)
React Router now supports an alternative way to define your route element and errorElement fields as React Components instead of React Elements. You can instead pass a React Component to the new Component and ErrorBoundary 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 do Component/ErrorBoundary will "win". (#10045)
Example JSON Syntax
// Both of these work the same:
const elementRoutes = [{
Added support for Future Flags in React Router. The first flag being introduced is future.v7_normalizeFormMethod which will normalize the exposed useNavigation()/useFetcher()formMethod fields as uppercase HTTP methods to align with the fetch() behavior. (#10207)
When future.v7_normalizeFormMethod === false (default v6 behavior),
useNavigation().formMethod is lowercase
useFetcher().formMethod is lowercase
When future.v7_normalizeFormMethod === true:
useNavigation().formMethod is uppercase
useFetcher().formMethod is uppercase
Patch Changes
Fix route ID generation when using Fragments in createRoutesFromElements (#10193)
Updated dependencies:
@remix-run/router@1.5.0
6.9.0
Minor Changes
React Router now supports an alternative way to define your route element and errorElement fields as React Components instead of React Elements. You can instead pass a React Component to the new Component and ErrorBoundary 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 do Component/ErrorBoundary will "win". (#10045)
Example JSON Syntax
// Both of these work the same:
const elementRoutes = [{
path: '/',
element: <Home />,
errorElement: <HomeError />,
}]
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 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 from 6.4.5 to 6.10.0.
Release notes
Sourced from react-router's releases.
... (truncated)
Changelog
Sourced from react-router's changelog.
... (truncated)
Commits
a3927fe
chore: Update version for release (#10284)8f7939c
chore: Update version for release (pre) (#10260)7799f6c
chore: Update version for release (pre) (#10248)97b5c42
chore: Update version for release (pre) (#10243)5bfffa8
Merge branch 'main' into release-nextdff7e64
Add future.v7_normalizeFormMethod flag (#10207)af4b07d
Fix route ID generation when using Fragments in createRoutesFromElements (#10...28bdebf
Convert data-memory-router-tests to use createMemoryRouter directly (#10188)40d49e1
Fix links in changelogs to point to PRs4ec107a
chore: Update version for release (#10185)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 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)