UNPKG

10.3 kBMarkdownView Raw
1# `react-router`
2
3## 6.10.0
4
5### Minor Changes
6
7- Added support for [**Future Flags**](https://reactrouter.com/en/main/guides/api-development-strategy) 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](https://github.com/remix-run/react-router/pull/10207))
8
9 - When `future.v7_normalizeFormMethod === false` (default v6 behavior),
10 - `useNavigation().formMethod` is lowercase
11 - `useFetcher().formMethod` is lowercase
12 - When `future.v7_normalizeFormMethod === true`:
13 - `useNavigation().formMethod` is uppercase
14 - `useFetcher().formMethod` is uppercase
15
16### Patch Changes
17
18- Fix route ID generation when using Fragments in `createRoutesFromElements` ([#10193](https://github.com/remix-run/react-router/pull/10193))
19- Updated dependencies:
20 - `@remix-run/router@1.5.0`
21
22## 6.9.0
23
24### Minor Changes
25
26- 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))
27
28 **Example JSON Syntax**
29
30 ```jsx
31 // Both of these work the same:
32 const elementRoutes = [{
33 path: '/',
34 element: <Home />,
35 errorElement: <HomeError />,
36 }]
37
38 const componentRoutes = [{
39 path: '/',
40 Component: Home,
41 ErrorBoundary: HomeError,
42 }]
43
44 function Home() { ... }
45 function HomeError() { ... }
46 ```
47
48 **Example JSX Syntax**
49
50 ```jsx
51 // Both of these work the same:
52 const elementRoutes = createRoutesFromElements(
53 <Route path='/' element={<Home />} errorElement={<HomeError /> } />
54 );
55
56 const componentRoutes = createRoutesFromElements(
57 <Route path='/' Component={Home} ErrorBoundary={HomeError} />
58 );
59
60 function Home() { ... }
61 function HomeError() { ... }
62 ```
63
64- **Introducing Lazy Route Modules!** ([#10045](https://github.com/remix-run/react-router/pull/10045))
65
66 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`).
67
68 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.
69
70 Your `lazy` functions will typically return the result of a dynamic import.
71
72 ```jsx
73 // In this example, we assume most folks land on the homepage so we include that
74 // in our critical-path bundle, but then we lazily load modules for /a and /b so
75 // they don't load until the user navigates to those routes
76 let routes = createRoutesFromElements(
77 <Route path="/" element={<Layout />}>
78 <Route index element={<Home />} />
79 <Route path="a" lazy={() => import("./a")} />
80 <Route path="b" lazy={() => import("./b")} />
81 </Route>
82 );
83 ```
84
85 Then in your lazy route modules, export the properties you want defined for the route:
86
87 ```jsx
88 export async function loader({ request }) {
89 let data = await fetchData(request);
90 return json(data);
91 }
92
93 // Export a `Component` directly instead of needing to create a React Element from it
94 export function Component() {
95 let data = useLoaderData();
96
97 return (
98 <>
99 <h1>You made it!</h1>
100 <p>{data}</p>
101 </>
102 );
103 }
104
105 // Export an `ErrorBoundary` directly instead of needing to create a React Element from it
106 export function ErrorBoundary() {
107 let error = useRouteError();
108 return isRouteErrorResponse(error) ? (
109 <h1>
110 {error.status} {error.statusText}
111 </h1>
112 ) : (
113 <h1>{error.message || error}</h1>
114 );
115 }
116 ```
117
118 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.
119
120 🙌 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).
121
122- Updated dependencies:
123 - `@remix-run/router@1.4.0`
124
125### Patch Changes
126
127- Fix `generatePath` incorrectly applying parameters in some cases ([#10078](https://github.com/remix-run/react-router/pull/10078))
128- Improve memoization for context providers to avoid unnecessary re-renders ([#9983](https://github.com/remix-run/react-router/pull/9983))
129
130## 6.8.2
131
132### Patch Changes
133
134- Updated dependencies:
135 - `@remix-run/router@1.3.3`
136
137## 6.8.1
138
139### Patch Changes
140
141- Remove inaccurate console warning for POP navigations and update active blocker logic ([#10030](https://github.com/remix-run/react-router/pull/10030))
142- Updated dependencies:
143 - `@remix-run/router@1.3.2`
144
145## 6.8.0
146
147### Patch Changes
148
149- Updated dependencies:
150 - `@remix-run/router@1.3.1`
151
152## 6.7.0
153
154### Minor Changes
155
156- Add `unstable_useBlocker` hook for blocking navigations within the app's location origin ([#9709](https://github.com/remix-run/react-router/pull/9709))
157
158### Patch Changes
159
160- Fix `generatePath` when optional params are present ([#9764](https://github.com/remix-run/react-router/pull/9764))
161- Update `<Await>` to accept `ReactNode` as children function return result ([#9896](https://github.com/remix-run/react-router/pull/9896))
162- Updated dependencies:
163 - `@remix-run/router@1.3.0`
164
165## 6.6.2
166
167### Patch Changes
168
169- Ensure `useId` consistency during SSR ([#9805](https://github.com/remix-run/react-router/pull/9805))
170
171## 6.6.1
172
173### Patch Changes
174
175- Updated dependencies:
176 - `@remix-run/router@1.2.1`
177
178## 6.6.0
179
180### Patch Changes
181
182- Prevent `useLoaderData` usage in `errorElement` ([#9735](https://github.com/remix-run/react-router/pull/9735))
183- Updated dependencies:
184 - `@remix-run/router@1.2.0`
185
186## 6.5.0
187
188This release introduces support for [Optional Route Segments](https://github.com/remix-run/react-router/issues/9546). Now, adding a `?` to the end of any path segment will make that entire segment optional. This works for both static segments and dynamic parameters.
189
190**Optional Params Examples**
191
192- `<Route path=":lang?/about>` will match:
193 - `/:lang/about`
194 - `/about`
195- `<Route path="/multistep/:widget1?/widget2?/widget3?">` will match:
196 - `/multistep`
197 - `/multistep/:widget1`
198 - `/multistep/:widget1/:widget2`
199 - `/multistep/:widget1/:widget2/:widget3`
200
201**Optional Static Segment Example**
202
203- `<Route path="/home?">` will match:
204 - `/`
205 - `/home`
206- `<Route path="/fr?/about">` will match:
207 - `/about`
208 - `/fr/about`
209
210### Minor Changes
211
212- Allows optional routes and optional static segments ([#9650](https://github.com/remix-run/react-router/pull/9650))
213
214### Patch Changes
215
216- Stop incorrectly matching on partial named parameters, i.e. `<Route path="prefix-:param">`, to align with how splat parameters work. If you were previously relying on this behavior then it's recommended to extract the static portion of the path at the `useParams` call site: ([#9506](https://github.com/remix-run/react-router/pull/9506))
217
218```jsx
219// Old behavior at URL /prefix-123
220<Route path="prefix-:id" element={<Comp /> }>
221
222function Comp() {
223 let params = useParams(); // { id: '123' }
224 let id = params.id; // "123"
225 ...
226}
227
228// New behavior at URL /prefix-123
229<Route path=":id" element={<Comp /> }>
230
231function Comp() {
232 let params = useParams(); // { id: 'prefix-123' }
233 let id = params.id.replace(/^prefix-/, ''); // "123"
234 ...
235}
236```
237
238- Updated dependencies:
239 - `@remix-run/router@1.1.0`
240
241## 6.4.5
242
243### Patch Changes
244
245- Updated dependencies:
246 - `@remix-run/router@1.0.5`
247
248## 6.4.4
249
250### Patch Changes
251
252- Updated dependencies:
253 - `@remix-run/router@1.0.4`
254
255## 6.4.3
256
257### Patch Changes
258
259- `useRoutes` should be able to return `null` when passing `locationArg` ([#9485](https://github.com/remix-run/react-router/pull/9485))
260- fix `initialEntries` type in `createMemoryRouter` ([#9498](https://github.com/remix-run/react-router/pull/9498))
261- Updated dependencies:
262 - `@remix-run/router@1.0.3`
263
264## 6.4.2
265
266### Patch Changes
267
268- Fix `IndexRouteObject` and `NonIndexRouteObject` types to make `hasErrorElement` optional ([#9394](https://github.com/remix-run/react-router/pull/9394))
269- Enhance console error messages for invalid usage of data router hooks ([#9311](https://github.com/remix-run/react-router/pull/9311))
270- If an index route has children, it will result in a runtime error. We have strengthened our `RouteObject`/`RouteProps` types to surface the error in TypeScript. ([#9366](https://github.com/remix-run/react-router/pull/9366))
271- Updated dependencies:
272 - `@remix-run/router@1.0.2`
273
274## 6.4.1
275
276### Patch Changes
277
278- Preserve state from `initialEntries` ([#9288](https://github.com/remix-run/react-router/pull/9288))
279- Updated dependencies:
280 - `@remix-run/router@1.0.1`
281
282## 6.4.0
283
284Whoa 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][rr-docs], especially the [feature overview][rr-feature-overview] and the [tutorial][rr-tutorial].
285
286**New APIs**
287
288- Create your router with `createMemoryRouter`
289- Render your router with `<RouterProvider>`
290- Load data with a Route `loader` and mutate with a Route `action`
291- Handle errors with Route `errorElement`
292- Defer non-critical data with `defer` and `Await`
293
294**Bug Fixes**
295
296- Path resolution is now trailing slash agnostic (#8861)
297- `useLocation` returns the scoped location inside a `<Routes location>` component (#9094)
298
299**Updated Dependencies**
300
301- `@remix-run/router@1.0.0`
302
303[rr-docs]: https://reactrouter.com
304[rr-feature-overview]: https://reactrouter.com/start/overview
305[rr-tutorial]: https://reactrouter.com/start/tutorial