@remix-run/router 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # `@remix-run/router`
 
+## 1.6.0
+
+### Minor Changes
+
+- Enable relative routing in the `@remix-run/router` when providing a source route ID from which the path is relative to: ([#10336](https://github.com/remix-run/react-router/pull/10336))
+
+  - Example: `router.navigate("../path", { fromRouteId: "some-route" })`.
+  - This also applies to `router.fetch` which already receives a source route ID
+
+- Introduce a new `@remix-run/router` `future.v7_prependBasename` flag to enable `basename` prefixing to all paths coming into `router.navigate` and `router.fetch`.
+
+  - Previously the `basename` was prepended in the React Router layer, but now that relative routing is being handled by the router we need prepend the `basename` _after_ resolving any relative paths
+  - This also enables `basename` support in `useFetcher` as well
+
+### Patch Changes
+
+- Enhance `LoaderFunction`/`ActionFunction` return type to prevent `undefined` from being a valid return value ([#10267](https://github.com/remix-run/react-router/pull/10267))
+- Ensure proper 404 error on `fetcher.load` call to a route without a `loader` ([#10345](https://github.com/remix-run/react-router/pull/10345))
+- Deprecate the `createRouter` `detectErrorBoundary` option in favor of the new `mapRouteProperties` option for converting a framework-agnostic route to a framework-aware route. This allows us to set more than just the `hasErrorBoundary` property during route pre-processing, and is now used for mapping `Component -> element` and `ErrorBoundary -> errorElement` in `react-router`. ([#10287](https://github.com/remix-run/react-router/pull/10287))
+- Fixed a bug where fetchers were incorrectly attempting to revalidate on search params changes or routing to the same URL (using the same logic for route `loader` revalidations). However, since fetchers have a static href, they should only revalidate on `action` submissions or `router.revalidate` calls. ([#10344](https://github.com/remix-run/react-router/pull/10344))
+- Decouple `AbortController` usage between revalidating fetchers and the thing that triggered them such that the unmount/deletion of a revalidating fetcher doesn't impact the ongoing triggering navigation/revalidation ([#10271](https://github.com/remix-run/react-router/pull/10271))
+
 ## 1.5.0
 
 ### Minor Changes

package/LICENSE.md

@@ -1,7 +1,8 @@
 MIT License
 
-Copyright (c) React Training 2015-2019
-Copyright (c) Remix Software 2020-2022
+Copyright (c) React Training LLC 2015-2019
+Copyright (c) Remix Software Inc. 2020-2021
+Copyright (c) Shopify Inc. 2022-2023
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -2,7 +2,7 @@
 
 The `@remix-run/router` package is a framework-agnostic routing package (sometimes referred to as a browser-emulator) that serves as the heart of [React Router][react-router] and [Remix][remix] and provides all the core functionality for routing coupled with data loading and data mutations. It comes with built-in handling of errors, race-conditions, interruptions, cancellations, lazy-loading data, and much, much more.
 
-If you're using React Router, you should never `import` anything directly from the `@remix-run/router` or `react-router` packages, but you should have everything you need in either `react-router-dom` or `react-router-native`. Both of those packages re-export everything from `@remix-run/router` and `react-router`.
+If you're using React Router, you should never `import` anything directly from the `@remix-run/router` - you should have everything you need in `react-router-dom` (or `react-router`/`react-router-native` if you're not rendering in the browser). All of those packages should re-export everything you would otherwise need from `@remix-run/router`.
 
 > **Warning**
 >
@@ -16,11 +16,23 @@ A Router instance can be created using `createRouter`:
 // Create and initialize a router.  "initialize" contains all side effects
 // including history listeners and kicking off the initial data fetch
 let router = createRouter({
-  // Routes array
-  routes: ,
-  // History instance
-  history,
-}).initialize()
+  // Required properties
+  routes: [{
+    path: '/',
+    loader: ({ request, params }) => { /* ... */ },
+    children: [{
+      path: 'home',
+      loader: ({ request, params }) => { /* ... */ },
+    }]
+  },
+  history: createBrowserHistory(),
+
+  // Optional properties
+  basename, // Base path
+  mapRouteProperties, // Map framework-agnostic routes to framework-aware routes
+  future, // Future flags
+  hydrationData, // Hydration data if using server-side-rendering
+}).initialize();
 ```
 
 Internally, the Router represents the state in an object of the following format, which is available through `router.state`. You can also register a subscriber of the signature `(state: RouterState) => void` to execute when the state updates via `router.subscribe()`;
@@ -78,6 +90,11 @@ router.navigate("/page", {
   formMethod: "post",
   formData,
 });
+
+// Relative routing from a source routeId
+router.navigate("../../somewhere", {
+  fromRouteId: "active-route-id",
+});
 ```
 
 ### Fetchers
@@ -101,7 +118,18 @@ router.fetch("key", "/page", {
 
 By default, active loaders will revalidate after any navigation or fetcher mutation. If you need to kick off a revalidation for other use-cases, you can use `router.revalidate()` to re-execute all active loaders.
 
+### Future Flags
+
+We use _Future Flags_ in the router to help us introduce breaking changes in an opt-in fashion ahead of major releases. Please check out the [blog post][future-flags-post] and [React Router Docs][api-development-strategy] for more information on this process. The currently available future flags in `@remix-run/router` are:
+
+| Flag                     | Description                                                               |
+| ------------------------ | ------------------------------------------------------------------------- |
+| `v7_normalizeFormMethod` | Normalize `useNavigation().formMethod` to be an uppercase HTTP Method     |
+| `v7_prependBasename`     | Prepend the `basename` to incoming `router.navigate`/`router.fetch` paths |
+
 [react-router]: https://reactrouter.com
 [remix]: https://remix.run
 [react-router-repo]: https://github.com/remix-run/react-router
 [remix-routers-repo]: https://github.com/brophdawg11/remix-routers
+[api-development-strategy]: https://reactrouter.com/en/main/guides/api-development-strategy
+[future-flags-post]: https://remix.run/blog/future-flags