|
1 | 1 | # `react-router` |
2 | 2 |
|
| 3 | +## 6.9.0-pre.0 |
| 4 | + |
| 5 | +### Minor Changes |
| 6 | + |
| 7 | +- 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)) |
| 8 | + |
| 9 | + **Example JSON Syntax** |
| 10 | + |
| 11 | + ```jsx |
| 12 | + // Both of these work the same: |
| 13 | + const elementRoutes = [{ |
| 14 | + path: '/', |
| 15 | + element: <Home />, |
| 16 | + errorElement: <HomeError />, |
| 17 | + }] |
| 18 | + |
| 19 | + const componentRoutes = [{ |
| 20 | + path: '/', |
| 21 | + Component: Home, |
| 22 | + ErrorBoundary: HomeError, |
| 23 | + }] |
| 24 | + |
| 25 | + function Home() { ... } |
| 26 | + function HomeError() { ... } |
| 27 | + ``` |
| 28 | + |
| 29 | + **Example JSX Syntax** |
| 30 | + |
| 31 | + ```jsx |
| 32 | + // Both of these work the same: |
| 33 | + const elementRoutes = createRoutesFromElements( |
| 34 | + <Route path='/' element={<Home />} errorElement={<HomeError /> } /> |
| 35 | + ); |
| 36 | + |
| 37 | + const componentRoutes = createRoutesFromElements( |
| 38 | + <Route path='/' Component={Home} ErrorBoundary={HomeError} /> |
| 39 | + ); |
| 40 | + |
| 41 | + function Home() { ... } |
| 42 | + function HomeError() { ... } |
| 43 | + ``` |
| 44 | + |
| 45 | +- **Introducing Lazy Route Modules!** ([#10045](https://github.com/remix-run/react-router/pull/10045)) |
| 46 | + |
| 47 | + 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`). |
| 48 | + |
| 49 | + 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. |
| 50 | + |
| 51 | + Your `lazy` functions will typically return the result of a dynamic import. |
| 52 | + |
| 53 | + ```jsx |
| 54 | + // In this example, we assume most folks land on the homepage so we include that |
| 55 | + // in our critical-path bundle, but then we lazily load modules for /a and /b so |
| 56 | + // they don't load until the user navigates to those routes |
| 57 | + let routes = createRoutesFromElements( |
| 58 | + <Route path="/" element={<Layout />}> |
| 59 | + <Route index element={<Home />} /> |
| 60 | + <Route path="a" lazy={() => import("./a")} /> |
| 61 | + <Route path="b" lazy={() => import("./b")} /> |
| 62 | + </Route> |
| 63 | + ); |
| 64 | + ``` |
| 65 | + |
| 66 | + Then in your lazy route modules, export the properties you want defined for the route: |
| 67 | + |
| 68 | + ```jsx |
| 69 | + export async function loader({ request }) { |
| 70 | + let data = await fetchData(request); |
| 71 | + return json(data); |
| 72 | + } |
| 73 | + |
| 74 | + // Export a `Component` directly instead of needing to create a React Element from it |
| 75 | + export function Component() { |
| 76 | + let data = useLoaderData(); |
| 77 | + |
| 78 | + return ( |
| 79 | + <> |
| 80 | + <h1>You made it!</h1> |
| 81 | + <p>{data}</p> |
| 82 | + </> |
| 83 | + ); |
| 84 | + } |
| 85 | + |
| 86 | + // Export an `ErrorBoundary` directly instead of needing to create a React Element from it |
| 87 | + export function ErrorBoundary() { |
| 88 | + let error = useRouteError(); |
| 89 | + return isRouteErrorResponse(error) ? ( |
| 90 | + <h1> |
| 91 | + {error.status} {error.statusText} |
| 92 | + </h1> |
| 93 | + ) : ( |
| 94 | + <h1>{error.message || error}</h1> |
| 95 | + ); |
| 96 | + } |
| 97 | + ``` |
| 98 | + |
| 99 | + 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. |
| 100 | + |
| 101 | + 🙌 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). |
| 102 | + |
| 103 | +### Patch Changes |
| 104 | + |
| 105 | +- Fix `generatePath` incorrectly applying parameters in some cases ([`bc6fefa1`](https://github.com/remix-run/react-router/commit/bc6fefa19019ce9f5250c8b5af9b8c5d3390e9d1)) |
| 106 | +- Improve memoization for context providers to avoid unnecessary re-renders ([`bc6fefa1`](https://github.com/remix-run/react-router/commit/bc6fefa19019ce9f5250c8b5af9b8c5d3390e9d1)) |
| 107 | +- Updated dependencies: |
| 108 | + |
| 109 | + |
3 | 110 | ## 6.8.2 |
4 | 111 |
|
5 | 112 | ### Patch Changes |
|
0 commit comments