react-router 0.0.0-experimental-35fa15e5 → 0.0.0-experimental-8bb3ffdf

package/CHANGELOG.md

@@ -1,5 +1,168 @@
 # `react-router`
 
+## 6.21.0
+
+### Minor Changes
+
+- Add a new `future.v7_relativeSplatPath` flag to implement a breaking bug fix to relative routing when inside a splat route. ([#11087](https://github.com/remix-run/react-router/pull/11087))
+
+  This fix was originally added in [#10983](https://github.com/remix-run/react-router/issues/10983) and was later reverted in [#11078](https://github.com/remix-run/react-router/pull/11078) because it was determined that a large number of existing applications were relying on the buggy behavior (see [#11052](https://github.com/remix-run/react-router/issues/11052))
+
+  **The Bug**
+  The buggy behavior is that without this flag, the default behavior when resolving relative paths is to _ignore_ any splat (`*`) portion of the current route path.
+
+  **The Background**
+  This decision was originally made thinking that it would make the concept of nested different sections of your apps in `<Routes>` easier if relative routing would _replace_ the current splat:
+
+  ```jsx
+  <BrowserRouter>
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="dashboard/*" element={<Dashboard />} />
+    </Routes>
+  </BrowserRouter>
+  ```
+
+  Any paths like `/dashboard`, `/dashboard/team`, `/dashboard/projects` will match the `Dashboard` route. The dashboard component itself can then render nested `<Routes>`:
+
+  ```jsx
+  function Dashboard() {
+    return (
+      <div>
+        <h2>Dashboard</h2>
+        <nav>
+          <Link to="/">Dashboard Home</Link>
+          <Link to="team">Team</Link>
+          <Link to="projects">Projects</Link>
+        </nav>
+
+        <Routes>
+          <Route path="/" element={<DashboardHome />} />
+          <Route path="team" element={<DashboardTeam />} />
+          <Route path="projects" element={<DashboardProjects />} />
+        </Routes>
+      </div>
+    );
+  }
+  ```
+
+  Now, all links and route paths are relative to the router above them. This makes code splitting and compartmentalizing your app really easy. You could render the `Dashboard` as its own independent app, or embed it into your large app without making any changes to it.
+
+  **The Problem**
+
+  The problem is that this concept of ignoring part of a path breaks a lot of other assumptions in React Router - namely that `"."` always means the current location pathname for that route. When we ignore the splat portion, we start getting invalid paths when using `"."`:
+
+  ```jsx
+  // If we are on URL /dashboard/team, and we want to link to /dashboard/team:
+  function DashboardTeam() {
+    // ❌ This is broken and results in <a href="/dashboard">
+    return <Link to=".">A broken link to the Current URL</Link>;
+
+    // ✅ This is fixed but super unintuitive since we're already at /dashboard/team!
+    return <Link to="./team">A broken link to the Current URL</Link>;
+  }
+  ```
+
+  We've also introduced an issue that we can no longer move our `DashboardTeam` component around our route hierarchy easily - since it behaves differently if we're underneath a non-splat route, such as `/dashboard/:widget`. Now, our `"."` links will, properly point to ourself _inclusive of the dynamic param value_ so behavior will break from it's corresponding usage in a `/dashboard/*` route.
+
+  Even worse, consider a nested splat route configuration:
+
+  ```jsx
+  <BrowserRouter>
+    <Routes>
+      <Route path="dashboard">
+        <Route path="*" element={<Dashboard />} />
+      </Route>
+    </Routes>
+  </BrowserRouter>
+  ```
+
+  Now, a `<Link to=".">` and a `<Link to="..">` inside the `Dashboard` component go to the same place! That is definitely not correct!
+
+  Another common issue arose in Data Routers (and Remix) where any `<Form>` should post to it's own route `action` if you the user doesn't specify a form action:
+
+  ```jsx
+  let router = createBrowserRouter({
+    path: "/dashboard",
+    children: [
+      {
+        path: "*",
+        action: dashboardAction,
+        Component() {
+          // ❌ This form is broken!  It throws a 405 error when it submits because
+          // it tries to submit to /dashboard (without the splat value) and the parent
+          // `/dashboard` route doesn't have an action
+          return <Form method="post">...</Form>;
+        },
+      },
+    ],
+  });
+  ```
+
+  This is just a compounded issue from the above because the default location for a `Form` to submit to is itself (`"."`) - and if we ignore the splat portion, that now resolves to the parent route.
+
+  **The Solution**
+  If you are leveraging this behavior, it's recommended to enable the future flag, move your splat to it's own route, and leverage `../` for any links to "sibling" pages:
+
+  ```jsx
+  <BrowserRouter>
+    <Routes>
+      <Route path="dashboard">
+        <Route path="*" element={<Dashboard />} />
+      </Route>
+    </Routes>
+  </BrowserRouter>
+
+  function Dashboard() {
+    return (
+      <div>
+        <h2>Dashboard</h2>
+        <nav>
+          <Link to="..">Dashboard Home</Link>
+          <Link to="../team">Team</Link>
+          <Link to="../projects">Projects</Link>
+        </nav>
+
+        <Routes>
+          <Route path="/" element={<DashboardHome />} />
+          <Route path="team" element={<DashboardTeam />} />
+          <Route path="projects" element={<DashboardProjects />} />
+        </Router>
+      </div>
+    );
+  }
+  ```
+
+  This way, `.` means "the full current pathname for my route" in all cases (including static, dynamic, and splat routes) and `..` always means "my parents pathname".
+
+### Patch Changes
+
+- Properly handle falsy error values in ErrorBoundary's ([#11071](https://github.com/remix-run/react-router/pull/11071))
+- Updated dependencies:
+  - `@remix-run/router@1.14.0`
+
+## 6.20.1
+
+### Patch Changes
+
+- Revert the `useResolvedPath` fix for splat routes due to a large number of applications that were relying on the buggy behavior (see https://github.com/remix-run/react-router/issues/11052#issuecomment-1836589329). We plan to re-introduce this fix behind a future flag in the next minor version. ([#11078](https://github.com/remix-run/react-router/pull/11078))
+- Updated dependencies:
+  - `@remix-run/router@1.13.1`
+
+## 6.20.0
+
+### Minor Changes
+
+- Export the `PathParam` type from the public API ([#10719](https://github.com/remix-run/react-router/pull/10719))
+
+### Patch Changes
+
+- Fix bug with `resolveTo` in splat routes ([#11045](https://github.com/remix-run/react-router/pull/11045))
+  - This is a follow up to [#10983](https://github.com/remix-run/react-router/pull/10983) to handle the few other code paths using `getPathContributingMatches`
+  - This removes the `UNSAFE_getPathContributingMatches` export from `@remix-run/router` since we no longer need this in the `react-router`/`react-router-dom` layers
+- Updated dependencies:
+  - `@remix-run/router@1.13.0`
+
 ## 6.19.0
 
 ### Minor Changes
@@ -122,7 +285,7 @@
 
 ## 6.12.1
 
-> **Warning**
+> [!WARNING]
 > Please use version `6.13.0` or later instead of `6.12.1`. This version suffers from a `webpack`/`terser` minification issue resulting in invalid minified code in your resulting production bundles which can cause issues in your application. See [#10579](https://github.com/remix-run/react-router/issues/10579) for more details.
 
 ### Patch Changes

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router v0.0.0-experimental-35fa15e5
+ * React Router v0.0.0-experimental-8bb3ffdf
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -204,6 +204,7 @@ function useNavigateUnstable() {
   let dataRouterContext = React.useContext(DataRouterContext);
   let {
     basename,
+    future,
     navigator
   } = React.useContext(NavigationContext);
   let {
@@ -212,7 +213,7 @@ function useNavigateUnstable() {
   let {
     pathname: locationPathname
   } = useLocation();
-  let routePathnamesJson = JSON.stringify(UNSAFE_getResolveToMatches(matches));
+  let routePathnamesJson = JSON.stringify(UNSAFE_getResolveToMatches(matches, future.v7_relativeSplatPath));
   let activeRef = React.useRef(false);
   useIsomorphicLayoutEffect(() => {
     activeRef.current = true;
@@ -295,13 +296,16 @@ function useResolvedPath(to, _temp2) {
   let {
     relative
   } = _temp2 === void 0 ? {} : _temp2;
+  let {
+    future
+  } = React.useContext(NavigationContext);
   let {
     matches
   } = React.useContext(RouteContext);
   let {
     pathname: locationPathname
   } = useLocation();
-  let routePathnamesJson = JSON.stringify(UNSAFE_getResolveToMatches(matches));
+  let routePathnamesJson = JSON.stringify(UNSAFE_getResolveToMatches(matches, future.v7_relativeSplatPath));
   return React.useMemo(() => resolveTo(to, JSON.parse(routePathnamesJson), locationPathname, relative === "path"), [to, routePathnamesJson, locationPathname, relative]);
 }
 
@@ -374,7 +378,7 @@ function useRoutesImpl(routes, locationArg, dataRouterState, future) {
   });
   if (process.env.NODE_ENV !== "production") {
     process.env.NODE_ENV !== "production" ? UNSAFE_warning(parentRoute || matches != null, "No routes matched location \"" + location.pathname + location.search + location.hash + "\" ") : void 0;
-    process.env.NODE_ENV !== "production" ? UNSAFE_warning(matches == null || matches[matches.length - 1].route.element !== undefined || matches[matches.length - 1].route.Component !== undefined, "Matched leaf route at location \"" + location.pathname + location.search + location.hash + "\" " + "does not have an element or Component. This means it will render an <Outlet /> with a " + "null value by default resulting in an \"empty\" page.") : void 0;
+    process.env.NODE_ENV !== "production" ? UNSAFE_warning(matches == null || matches[matches.length - 1].route.element !== undefined || matches[matches.length - 1].route.Component !== undefined || matches[matches.length - 1].route.lazy !== undefined, "Matched leaf route at location \"" + location.pathname + location.search + location.hash + "\" " + "does not have an element or Component. This means it will render an <Outlet /> with a " + "null value by default resulting in an \"empty\" page.") : void 0;
   }
   let renderedMatches = _renderMatches(matches && matches.map(match => Object.assign({}, match, {
     params: Object.assign({}, parentParams, match.params),
@@ -472,7 +476,7 @@ class RenderErrorBoundary extends React.Component {
     // this because the error provided from the app state may be cleared without
     // the location changing.
     return {
-      error: props.error || state.error,
+      error: props.error !== undefined ? props.error : state.error,
       location: state.location,
       revalidation: props.revalidation || state.revalidation
     };
@@ -481,7 +485,7 @@ class RenderErrorBoundary extends React.Component {
     console.error("React Router caught the following error during render", error, errorInfo);
   }
   render() {
-    return this.state.error ? /*#__PURE__*/React.createElement(RouteContext.Provider, {
+    return this.state.error !== undefined ? /*#__PURE__*/React.createElement(RouteContext.Provider, {
       value: this.props.routeContext
     }, /*#__PURE__*/React.createElement(RouteErrorContext.Provider, {
       value: this.state.error,
@@ -548,17 +552,24 @@ function _renderMatches(matches, parentMatches, dataRouterState, future) {
       if (match.route.HydrateFallback || match.route.hydrateFallbackElement) {
         fallbackIndex = i;
       }
-      if (match.route.loader && match.route.id && dataRouterState.loaderData[match.route.id] === undefined && (!dataRouterState.errors || dataRouterState.errors[match.route.id] === undefined)) {
-        // We found the first route without data/errors which means it's loader
-        // still needs to run.  Flag that we need to render a fallback and
-        // render up until the appropriate fallback
-        renderFallback = true;
-        if (fallbackIndex >= 0) {
-          renderedMatches = renderedMatches.slice(0, fallbackIndex + 1);
-        } else {
-          renderedMatches = [renderedMatches[0]];
+      if (match.route.id) {
+        let {
+          loaderData,
+          errors
+        } = dataRouterState;
+        let needsToRunLoader = match.route.loader && loaderData[match.route.id] === undefined && (!errors || errors[match.route.id] === undefined);
+        if (match.route.lazy || needsToRunLoader) {
+          // We found the first route that's not ready to render (waiting on
+          // lazy, or has a loader that hasn't run yet).  Flag that we need to
+          // render a fallback and render up until the appropriate fallback
+          renderFallback = true;
+          if (fallbackIndex >= 0) {
+            renderedMatches = renderedMatches.slice(0, fallbackIndex + 1);
+          } else {
+            renderedMatches = [renderedMatches[0]];
+          }
+          break;
         }
-        break;
       }
     }
   }
@@ -569,7 +580,7 @@ function _renderMatches(matches, parentMatches, dataRouterState, future) {
     let errorElement = null;
     let hydrateFallbackElement = null;
     if (dataRouterState) {
-      error = errors && match.route.id ? errors[match.route.id] : null;
+      error = errors && match.route.id ? errors[match.route.id] : undefined;
       errorElement = match.route.errorElement || defaultErrorElement;
       if (renderFallback) {
         if (fallbackIndex < 0 && index === 0) {
@@ -759,7 +770,7 @@ function useRouteError() {
 
   // If this was a render error, we put it in a RouteError context inside
   // of RenderErrorBoundary
-  if (error) {
+  if (error !== undefined) {
     return error;
   }
 
@@ -936,7 +947,7 @@ function RouterProvider(_ref) {
   // pick up on any render-driven redirects/navigations (useEffect/<Navigate>)
   React.useLayoutEffect(() => router.subscribe(setState), [router, setState]);
   React.useEffect(() => {
-    process.env.NODE_ENV !== "production" ? UNSAFE_warning(fallbackElement == null || !router.future.v7_partialHydration, "`<RouterProvider fallbackElement>` is deprecated when using `v7_partialHydration`") : void 0;
+    process.env.NODE_ENV !== "production" ? UNSAFE_warning(fallbackElement == null || !router.future.v7_partialHydration, "`<RouterProvider fallbackElement>` is deprecated when using " + "`v7_partialHydration`, use a `HydrateFallback` component instead") : void 0;
     // Only log this once on initial mount
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -978,8 +989,11 @@ function RouterProvider(_ref) {
     basename: basename,
     location: state.location,
     navigationType: state.historyAction,
-    navigator: navigator
-  }, state.initialized ? /*#__PURE__*/React.createElement(DataRoutes, {
+    navigator: navigator,
+    future: {
+      v7_relativeSplatPath: router.future.v7_relativeSplatPath
+    }
+  }, state.initialized || router.future.v7_partialHydration ? /*#__PURE__*/React.createElement(DataRoutes, {
     routes: router.routes,
     future: router.future,
     state: state
@@ -1031,7 +1045,8 @@ function MemoryRouter(_ref3) {
     children: children,
     location: state.location,
     navigationType: state.action,
-    navigator: history
+    navigator: history,
+    future: future
   });
 }
 /**
@@ -1053,7 +1068,11 @@ function Navigate(_ref4) {
   !useInRouterContext() ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, // TODO: This error is probably because they somehow have 2 versions of
   // the router loaded. We can help them understand how to avoid that.
   "<Navigate> may be used only in the context of a <Router> component.") : UNSAFE_invariant(false) : void 0;
-  process.env.NODE_ENV !== "production" ? UNSAFE_warning(!React.useContext(NavigationContext).static, "<Navigate> must not be used on the initial render in a <StaticRouter>. " + "This is a no-op, but you should modify your code so the <Navigate> is " + "only ever rendered in response to some user interaction or state change.") : void 0;
+  let {
+    future,
+    static: isStatic
+  } = React.useContext(NavigationContext);
+  process.env.NODE_ENV !== "production" ? UNSAFE_warning(!isStatic, "<Navigate> must not be used on the initial render in a <StaticRouter>. " + "This is a no-op, but you should modify your code so the <Navigate> is " + "only ever rendered in response to some user interaction or state change.") : void 0;
   let {
     matches
   } = React.useContext(RouteContext);
@@ -1064,7 +1083,7 @@ function Navigate(_ref4) {
 
   // Resolve the path outside of the effect so that when effects run twice in
   // StrictMode they navigate to the same place
-  let path = resolveTo(to, UNSAFE_getResolveToMatches(matches), locationPathname, relative === "path");
+  let path = resolveTo(to, UNSAFE_getResolveToMatches(matches, future.v7_relativeSplatPath), locationPathname, relative === "path");
   let jsonPath = JSON.stringify(path);
   React.useEffect(() => navigate(JSON.parse(jsonPath), {
     replace,
@@ -1105,7 +1124,8 @@ function Router(_ref5) {
     location: locationProp,
     navigationType = Action.Pop,
     navigator,
-    static: staticProp = false
+    static: staticProp = false,
+    future
   } = _ref5;
   !!useInRouterContext() ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "You cannot render a <Router> inside another <Router>." + " You should never have more than one in your app.") : UNSAFE_invariant(false) : void 0;
 
@@ -1115,8 +1135,11 @@ function Router(_ref5) {
   let navigationContext = React.useMemo(() => ({
     basename,
     navigator,
-    static: staticProp
-  }), [basename, navigator, staticProp]);
+    static: staticProp,
+    future: _extends({
+      v7_relativeSplatPath: false
+    }, future)
+  }), [basename, future, navigator, staticProp]);
   if (typeof locationProp === "string") {
     locationProp = parsePath(locationProp);
   }