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:
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)
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
// Before
function App() {
<DataBrowserRouter>
<Route path="/" element={<Layout />}>
<Route index element={<Home />}>
</Route>
<DataBrowserRouter>
}
// After
let router = createBrowserRouter([{
path: "/",
element: <Layout />,
children: [{
index: true,
element: <Home />,
}]
}]);
function App() {
return <RouterProvider router={router} />
}
If folks still prefer the JSX notation, they can leverage createRoutesFromElements (aliased from createRoutesFromChildren since they are not "children" in this usage):
let routes = createRoutesFromElements(
<Route path="/" element={<Layout />}>
<Route index element={<Home />}>
</Route>
);
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 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>
New Features
Perform path-relative navigations with <Link relative="path"> (#9160)
Bug Fixes
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)
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-dom from 5.3.0 to 6.4.1.
Release notes
Sourced from react-router-dom's releases.
... (truncated)
Changelog
Sourced from react-router-dom's changelog.
Commits
d405320
chore: update versions for releasec4a27f7
chore: Update version for release (pre) (#9316)aeceb7d
fix changeset config + update changelogsc430329
fix: properly handle?index
on fetcherget
submissions (#9312)8b00e7a
fix: preserve state from initialEntries (#9288)e20a6f7
fix: [Bug]: react-router-dom does not list dependency@remix-run/router
(#924...87851fb
chore: Update version for release (#9239)ab0da65
chore: addengines
field topackage.json
(#8951)e3d4596
chore: Update version for release (pre) (#9229)c17512d
fix: Remove the internal router singleton (#9227)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)