chore: Update version for release (pre)

.changeset/component-and-error-boundary.md

@@ -33,7 +33,7 @@ const elementRoutes = createRoutesFromElements(
   <Route path='/' element={<Home />} errorElement={<HomeError /> } />
 );
 
-const elementRoutes = createRoutesFromElements(
+const componentRoutes = createRoutesFromElements(
   <Route path='/' Component={Home} ErrorBoundary={HomeError} />
 );
 

.changeset/pre.json

@@ -8,5 +8,11 @@
     "react-router-native": "6.8.2",
     "@remix-run/router": "1.3.3"
   },
-  "changesets": []
+  "changesets": [
+    "compat-data-router-exports",
+    "component-and-error-boundary",
+    "fix-generate-path",
+    "improve-context-memoization",
+    "lazy-route-modules"
+  ]
 }

packages/react-router-dom-v5-compat/CHANGELOG.md

@@ -1,5 +1,14 @@
 # `react-router-dom-v5-compat`
 
+## 6.9.0-pre.0
+
+### Patch Changes
+
+- Add missed data router API re-exports ([#10171](https://github.com/remix-run/react-router/pull/10171))
+- Updated dependencies:
+  - `react-router@6.9.0-pre.0`
+  - `react-router-dom@6.9.0-pre.0`
+
 ## 6.8.2
 
 ### Patch Changes

packages/react-router-dom-v5-compat/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router-dom-v5-compat",
-  "version": "6.8.2",
+  "version": "6.9.0-pre.0",
   "description": "Migration path to React Router v6 from v4/5",
   "keywords": [
     "react",
@@ -24,7 +24,7 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "history": "^5.3.0",
-    "react-router": "6.8.2"
+    "react-router": "6.9.0-pre.0"
   },
   "peerDependencies": {
     "react": ">=16.8",

packages/react-router-dom/CHANGELOG.md

@@ -1,5 +1,111 @@
 # `react-router-dom`
 
+## 6.9.0-pre.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://github.com/remix-run/react-router/pull/10045))
+
+  **Example JSON Syntax**
+
+  ```jsx
+  // Both of these work the same:
+  const elementRoutes = [{
+    path: '/',
+    element: <Home />,
+    errorElement: <HomeError />,
+  }]
+
+  const componentRoutes = [{
+    path: '/',
+    Component: Home,
+    ErrorBoundary: HomeError,
+  }]
+
+  function Home() { ... }
+  function HomeError() { ... }
+  ```
+
+  **Example JSX Syntax**
+
+  ```jsx
+  // Both of these work the same:
+  const elementRoutes = createRoutesFromElements(
+    <Route path='/' element={<Home />} errorElement={<HomeError /> } />
+  );
+
+  const componentRoutes = createRoutesFromElements(
+    <Route path='/' Component={Home} ErrorBoundary={HomeError} />
+  );
+
+  function Home() { ... }
+  function HomeError() { ... }
+  ```
+
+- **Introducing Lazy Route Modules!** ([#10045](https://github.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(
+    <Route path="/" element={<Layout />}>
+      <Route index element={<Home />} />
+      <Route path="a" lazy={() => import("./a")} />
+      <Route path="b" lazy={() => import("./b")} />
+    </Route>
+  );
+  ```
+
+  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 (
+      <>
+        <h1>You made it!</h1>
+        <p>{data}</p>
+      </>
+    );
+  }
+
+  // Export an `ErrorBoundary` directly instead of needing to create a React Element from it
+  export function ErrorBoundary() {
+    let error = useRouteError();
+    return isRouteErrorResponse(error) ? (
+      <h1>
+        {error.status} {error.statusText}
+      </h1>
+    ) : (
+      <h1>{error.message || error}</h1>
+    );
+  }
+  ```
+
+  An example of this in action can be found in the [`examples/lazy-loading-router-provider`](https://github.com/remix-run/react-router/tree/main/examples/lazy-loading-router-provider) directory of the repository.
+
+  🙌 Huge thanks to @rossipedia for the [Initial Proposal](https://github.com/remix-run/react-router/discussions/9826) and [POC Implementation](https://github.com/remix-run/react-router/pull/9830).
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router@6.9.0-pre.0`
+  - `@remix-run/router@1.4.0-pre.0`
+
 ## 6.8.2
 
 ### Patch Changes

packages/react-router-dom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router-dom",
-  "version": "6.8.2",
+  "version": "6.9.0-pre.0",
   "description": "Declarative routing for React web applications",
   "keywords": [
     "react",
@@ -23,8 +23,8 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@remix-run/router": "1.3.3",
-    "react-router": "6.8.2"
+    "@remix-run/router": "1.4.0-pre.0",
+    "react-router": "6.9.0-pre.0"
   },
   "devDependencies": {
     "react": "^18.2.0",

packages/react-router-native/CHANGELOG.md

@@ -1,5 +1,12 @@
 # `react-router-native`
 
+## 6.9.0-pre.0
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router@6.9.0-pre.0`
+
 ## 6.8.2
 
 ### Patch Changes

packages/react-router-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router-native",
-  "version": "6.8.2",
+  "version": "6.9.0-pre.0",
   "description": "Declarative routing for React Native applications",
   "keywords": [
     "react",
@@ -22,7 +22,7 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "@ungap/url-search-params": "^0.1.4",
-    "react-router": "6.8.2"
+    "react-router": "6.9.0-pre.0"
   },
   "devDependencies": {
     "react": "^18.2.0",

packages/react-router/CHANGELOG.md

@@ -1,5 +1,112 @@
 # `react-router`
 
+## 6.9.0-pre.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://github.com/remix-run/react-router/pull/10045))
+
+  **Example JSON Syntax**
+
+  ```jsx
+  // Both of these work the same:
+  const elementRoutes = [{
+    path: '/',
+    element: <Home />,
+    errorElement: <HomeError />,
+  }]
+
+  const componentRoutes = [{
+    path: '/',
+    Component: Home,
+    ErrorBoundary: HomeError,
+  }]
+
+  function Home() { ... }
+  function HomeError() { ... }
+  ```
+
+  **Example JSX Syntax**
+
+  ```jsx
+  // Both of these work the same:
+  const elementRoutes = createRoutesFromElements(
+    <Route path='/' element={<Home />} errorElement={<HomeError /> } />
+  );
+
+  const componentRoutes = createRoutesFromElements(
+    <Route path='/' Component={Home} ErrorBoundary={HomeError} />
+  );
+
+  function Home() { ... }
+  function HomeError() { ... }
+  ```
+
+- **Introducing Lazy Route Modules!** ([#10045](https://github.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(
+    <Route path="/" element={<Layout />}>
+      <Route index element={<Home />} />
+      <Route path="a" lazy={() => import("./a")} />
+      <Route path="b" lazy={() => import("./b")} />
+    </Route>
+  );
+  ```
+
+  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 (
+      <>
+        <h1>You made it!</h1>
+        <p>{data}</p>
+      </>
+    );
+  }
+
+  // Export an `ErrorBoundary` directly instead of needing to create a React Element from it
+  export function ErrorBoundary() {
+    let error = useRouteError();
+    return isRouteErrorResponse(error) ? (
+      <h1>
+        {error.status} {error.statusText}
+      </h1>
+    ) : (
+      <h1>{error.message || error}</h1>
+    );
+  }
+  ```
+
+  An example of this in action can be found in the [`examples/lazy-loading-router-provider`](https://github.com/remix-run/react-router/tree/main/examples/lazy-loading-router-provider) directory of the repository.
+
+  🙌 Huge thanks to @rossipedia for the [Initial Proposal](https://github.com/remix-run/react-router/discussions/9826) and [POC Implementation](https://github.com/remix-run/react-router/pull/9830).
+
+### Patch Changes
+
+- Fix `generatePath` incorrectly applying parameters in some cases ([`bc6fefa1`](https://github.com/remix-run/react-router/commit/bc6fefa19019ce9f5250c8b5af9b8c5d3390e9d1))
+- Improve memoization for context providers to avoid unnecessary re-renders ([`bc6fefa1`](https://github.com/remix-run/react-router/commit/bc6fefa19019ce9f5250c8b5af9b8c5d3390e9d1))
+- Updated dependencies:
+  - `@remix-run/router@1.4.0-pre.0`
+
 ## 6.8.2
 
 ### Patch Changes

packages/react-router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router",
-  "version": "6.8.2",
+  "version": "6.9.0-pre.0",
   "description": "Declarative routing for React",
   "keywords": [
     "react",
@@ -23,7 +23,7 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@remix-run/router": "1.3.3"
+    "@remix-run/router": "1.4.0-pre.0"
   },
   "devDependencies": {
     "react": "^18.2.0"