react-router 6.11.0 → 6.11.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # `react-router`
 
+## 6.11.1
+
+### Patch Changes
+
+- Fix usage of `Component` API within descendant `<Routes>` ([#10434](https://github.com/remix-run/react-router/pull/10434))
+- Fix bug when calling `useNavigate` from `<Routes>` inside a `<RouterProvider>` ([#10432](https://github.com/remix-run/react-router/pull/10432))
+- Fix usage of `<Navigate>` in strict mode when using a data router ([#10435](https://github.com/remix-run/react-router/pull/10435))
+- Updated dependencies:
+  - `@remix-run/router@1.6.1`
+
 ## 6.11.0
 
 ### Patch Changes

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router v6.11.0
+ * React Router v6.11.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -61,7 +61,8 @@ if (process.env.NODE_ENV !== "production") {
 
 const RouteContext = /*#__PURE__*/React.createContext({
   outlet: null,
-  matches: []
+  matches: [],
+  isDataRoute: false
 });
 
 if (process.env.NODE_ENV !== "production") {
@@ -192,10 +193,12 @@ function useIsomorphicLayoutEffect(cb) {
 
 
 function useNavigate() {
-  let isDataRouter = React.useContext(DataRouterContext) != null; // Conditional usage is OK here because the usage of a data router is static
+  let {
+    isDataRoute
+  } = React.useContext(RouteContext); // Conditional usage is OK here because the usage of a data router is static
   // eslint-disable-next-line react-hooks/rules-of-hooks
 
-  return isDataRouter ? useNavigateStable() : useNavigateUnstable();
+  return isDataRoute ? useNavigateStable() : useNavigateUnstable();
 }
 
 function useNavigateUnstable() {
@@ -574,6 +577,14 @@ function _renderMatches(matches, parentMatches, dataRouterState) {
 
       if (error) {
         children = errorElement;
+      } else if (match.route.Component) {
+        // Note: This is a de-optimized path since React won't re-use the
+        // ReactElement since it's identity changes with each new
+        // React.createElement call.  We keep this so folks can use
+        // `<Route Component={...}>` in `<Routes>` but generally `Component`
+        // usage is only advised in `RouterProvider` when we can convert it to
+        // `element` ahead of time.
+        children = /*#__PURE__*/React.createElement(match.route.Component, null);
       } else if (match.route.element) {
         children = match.route.element;
       } else {
@@ -584,7 +595,8 @@ function _renderMatches(matches, parentMatches, dataRouterState) {
         match: match,
         routeContext: {
           outlet,
-          matches
+          matches,
+          isDataRoute: dataRouterState != null
         },
         children: children
       });
@@ -601,7 +613,8 @@ function _renderMatches(matches, parentMatches, dataRouterState) {
       children: getChildren(),
       routeContext: {
         outlet: null,
-        matches
+        matches,
+        isDataRoute: true
       }
     }) : getChildren();
   }, null);
@@ -974,22 +987,22 @@ function Navigate(_ref4) {
   // 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 dataRouterState = React.useContext(DataRouterStateContext);
-  let navigate = useNavigate();
-  React.useEffect(() => {
-    // Avoid kicking off multiple navigations if we're in the middle of a
-    // data-router navigation, since components get re-rendered when we enter
-    // a submitting/loading state
-    if (dataRouterState && dataRouterState.navigation.state !== "idle") {
-      return;
-    }
+  let {
+    matches
+  } = React.useContext(RouteContext);
+  let {
+    pathname: locationPathname
+  } = useLocation();
+  let navigate = useNavigate(); // Resolve the path outside of the effect so that when effects run twice in
+  // StrictMode they navigate to the same place
 
-    navigate(to, {
-      replace,
-      state,
-      relative
-    });
-  });
+  let path = resolveTo(to, UNSAFE_getPathContributingMatches(matches).map(match => match.pathnameBase), locationPathname, relative === "path");
+  let jsonPath = JSON.stringify(path);
+  React.useEffect(() => navigate(JSON.parse(jsonPath), {
+    replace,
+    state,
+    relative
+  }), [navigate, jsonPath, relative, replace, state]);
   return null;
 }