remix-run/react-router
### [`v6.9.0`](https://togithub.com/remix-run/react-router/blob/HEAD/packages/react-router-dom/CHANGELOG.md#690)
[Compare Source](https://togithub.com/remix-run/react-router/compare/react-router-dom@6.8.2...react-router-dom@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](https://togithub.com/remix-run/react-router/pull/10045))
**Example JSON Syntax**
```jsx
// Both of these work the same:
const elementRoutes = [{
path: '/',
element: ,
errorElement: ,
}]
const componentRoutes = [{
path: '/',
Component: Home,
ErrorBoundary: HomeError,
}]
function Home() { ... }
function HomeError() { ... }
```
**Example JSX Syntax**
```jsx
// Both of these work the same:
const elementRoutes = createRoutesFromElements(
} errorElement={ } />
);
const componentRoutes = createRoutesFromElements(
);
function Home() { ... }
function HomeError() { ... }
```
- **Introducing Lazy Route Modules!** ([#10045](https://togithub.com/remix-run/react-router/pull/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` or `submitting` 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.
```jsx
// 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(
}>
} />
import("./a")} />
import("./b")} />
);
```
Then in your lazy route modules, export the properties you want defined for the route:
```jsx
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 (
<>
You made it!
{data}
);
}
// Export an `ErrorBoundary` directly instead of needing to create a React Element from it
export function ErrorBoundary() {
let error = useRouteError();
return isRouteErrorResponse(error) ? (
{error.status} {error.statusText}
) : (
{error.message || error}
);
}
```
An example of this in action can be found in the [`examples/lazy-loading-router-provider`](https://togithub.com/remix-run/react-router/tree/main/examples/lazy-loading-router-provider) directory of the repository.
🙌 Huge thanks to [@rossipedia](https://togithub.com/rossipedia) for the [Initial Proposal](https://togithub.com/remix-run/react-router/discussions/9826) and [POC Implementation](https://togithub.com/remix-run/react-router/pull/9830).
- Updated dependencies:
- `react-router@6.9.0`
- `@remix-run/router@1.4.0`
### [`v6.8.2`](https://togithub.com/remix-run/react-router/blob/HEAD/packages/react-router-dom/CHANGELOG.md#682)
[Compare Source](https://togithub.com/remix-run/react-router/compare/react-router-dom@6.8.1...react-router-dom@6.8.2)
##### Patch Changes
- Treat same-origin absolute URLs in `` as external if they are outside of the router `basename` ([#10135](https://togithub.com/remix-run/react-router/pull/10135))
- Fix `useBlocker` to return `IDLE_BLOCKER` during SSR ([#10046](https://togithub.com/remix-run/react-router/pull/10046))
- Fix SSR of absolute `` urls ([#10112](https://togithub.com/remix-run/react-router/pull/10112))
- Properly escape HTML characters in `StaticRouterProvider` serialized hydration data ([#10068](https://togithub.com/remix-run/react-router/pull/10068))
- Updated dependencies:
- `@remix-run/router@1.3.3`
- `react-router@6.8.2`
### [`v6.8.1`](https://togithub.com/remix-run/react-router/blob/HEAD/packages/react-router-dom/CHANGELOG.md#681)
[Compare Source](https://togithub.com/remix-run/react-router/compare/react-router-dom@6.8.0...react-router-dom@6.8.1)
##### Patch Changes
- Improved absolute url detection in `Link` component (now also supports `mailto:` urls) ([#9994](https://togithub.com/remix-run/react-router/pull/9994))
- Fix partial object (search or hash only) pathnames losing current path value ([#10029](https://togithub.com/remix-run/react-router/pull/10029))
- Updated dependencies:
- `react-router@6.8.1`
- `@remix-run/router@1.3.2`
### [`v6.8.0`](https://togithub.com/remix-run/react-router/blob/HEAD/packages/react-router-dom/CHANGELOG.md#680)
[Compare Source](https://togithub.com/remix-run/react-router/compare/react-router-dom@6.7.0...react-router-dom@6.8.0)
##### Minor Changes
- Support absolute URLs in ``. 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](https://togithub.com/remix-run/react-router/pull/9900))
```tsx
{/* Document request */}
{/* Document request */}
{/* Client-side navigation */}
```
##### Patch Changes
- Fix bug with search params removal via `useSearchParams` ([#9969](https://togithub.com/remix-run/react-router/pull/9969))
- Respect `preventScrollReset` on `` ([#9963](https://togithub.com/remix-run/react-router/pull/9963))
- Fix navigation for hash routers on manual URL changes ([#9980](https://togithub.com/remix-run/react-router/pull/9980))
- Use `pagehide` instead of `beforeunload` for ``. This has better cross-browser support, specifically on Mobile Safari. ([#9945](https://togithub.com/remix-run/react-router/pull/9945))
- Updated dependencies:
- `@remix-run/router@1.3.1`
- `react-router@6.8.0`
### [`v6.7.0`](https://togithub.com/remix-run/react-router/blob/HEAD/packages/react-router-dom/CHANGELOG.md#670)
[Compare Source](https://togithub.com/remix-run/react-router/compare/react-router-dom@6.6.2...react-router-dom@6.7.0)
##### Minor Changes
- Add `unstable_useBlocker` hook for blocking navigations within the app's location origin ([#9709](https://togithub.com/remix-run/react-router/pull/9709))
- Add `unstable_usePrompt` hook for blocking navigations within the app's location origin ([#9932](https://togithub.com/remix-run/react-router/pull/9932))
- Add `preventScrollReset` prop to `
Configuration
📅 Schedule: Branch creation - At any time (no schedule defined), 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.
This PR contains the following updates:
~6.3.0->~6.9.0Release Notes
remix-run/react-router
### [`v6.9.0`](https://togithub.com/remix-run/react-router/blob/HEAD/packages/react-router-dom/CHANGELOG.md#690) [Compare Source](https://togithub.com/remix-run/react-router/compare/react-router-dom@6.8.2...react-router-dom@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](https://togithub.com/remix-run/react-router/pull/10045)) **Example JSON Syntax** ```jsx // Both of these work the same: const elementRoutes = [{ path: '/', element:You made it!
{data}
); } // Export an `ErrorBoundary` directly instead of needing to create a React Element from it export function ErrorBoundary() { let error = useRouteError(); return isRouteErrorResponse(error) ? ({error.status} {error.statusText}
) : ({error.message || error}
); } ``` An example of this in action can be found in the [`examples/lazy-loading-router-provider`](https://togithub.com/remix-run/react-router/tree/main/examples/lazy-loading-router-provider) directory of the repository. 🙌 Huge thanks to [@rossipedia](https://togithub.com/rossipedia) for the [Initial Proposal](https://togithub.com/remix-run/react-router/discussions/9826) and [POC Implementation](https://togithub.com/remix-run/react-router/pull/9830). - Updated dependencies: - `react-router@6.9.0` - `@remix-run/router@1.4.0` ### [`v6.8.2`](https://togithub.com/remix-run/react-router/blob/HEAD/packages/react-router-dom/CHANGELOG.md#682) [Compare Source](https://togithub.com/remix-run/react-router/compare/react-router-dom@6.8.1...react-router-dom@6.8.2) ##### Patch Changes - Treat same-origin absolute URLs in `` as external if they are outside of the router `basename` ([#10135](https://togithub.com/remix-run/react-router/pull/10135)) - Fix `useBlocker` to return `IDLE_BLOCKER` during SSR ([#10046](https://togithub.com/remix-run/react-router/pull/10046)) - Fix SSR of absolute `` urls ([#10112](https://togithub.com/remix-run/react-router/pull/10112)) - Properly escape HTML characters in `StaticRouterProvider` serialized hydration data ([#10068](https://togithub.com/remix-run/react-router/pull/10068)) - Updated dependencies: - `@remix-run/router@1.3.3` - `react-router@6.8.2` ### [`v6.8.1`](https://togithub.com/remix-run/react-router/blob/HEAD/packages/react-router-dom/CHANGELOG.md#681) [Compare Source](https://togithub.com/remix-run/react-router/compare/react-router-dom@6.8.0...react-router-dom@6.8.1) ##### Patch Changes - Improved absolute url detection in `Link` component (now also supports `mailto:` urls) ([#9994](https://togithub.com/remix-run/react-router/pull/9994)) - Fix partial object (search or hash only) pathnames losing current path value ([#10029](https://togithub.com/remix-run/react-router/pull/10029)) - Updated dependencies: - `react-router@6.8.1` - `@remix-run/router@1.3.2` ### [`v6.8.0`](https://togithub.com/remix-run/react-router/blob/HEAD/packages/react-router-dom/CHANGELOG.md#680) [Compare Source](https://togithub.com/remix-run/react-router/compare/react-router-dom@6.7.0...react-router-dom@6.8.0) ##### Minor Changes - Support absolute URLs in ``. 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](https://togithub.com/remix-run/react-router/pull/9900)) ```tsx {/* Document request */} {/* Document request */} {/* Client-side navigation */} ``` ##### Patch Changes - Fix bug with search params removal via `useSearchParams` ([#9969](https://togithub.com/remix-run/react-router/pull/9969)) - Respect `preventScrollReset` on `Configuration
📅 Schedule: Branch creation - At any time (no schedule defined), 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.
This PR has been generated by Mend Renovate. View repository job log here.