react-router 0.0.0-experimental-af76d50e → 0.0.0-experimental-dc8656c8

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # `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
+
+- Log loader/action errors to the console in dev for easier stack trace evaluation ([#10286](https://github.com/remix-run/react-router/pull/10286))
+- Fix bug preventing rendering of descendant `<Routes>` when `RouterProvider` errors existed ([#10374](https://github.com/remix-run/react-router/pull/10374))
+- Fix inadvertent re-renders when using `Component` instead of `element` on a route definition ([#10287](https://github.com/remix-run/react-router/pull/10287))
+- Fix detection of `useNavigate` in the render cycle by setting the `activeRef` in a layout effect, allowing the `navigate` function to be passed to child components and called in a `useEffect` there. ([#10394](https://github.com/remix-run/react-router/pull/10394))
+- Switched from `useSyncExternalStore` to `useState` for internal `@remix-run/router` router state syncing in `<RouterProvider>`. We found some [subtle bugs](https://codesandbox.io/s/use-sync-external-store-loop-9g7b81) where router state updates got propagated _before_ other normal `useState` updates, which could lead to footguns in `useEffect` calls. ([#10377](https://github.com/remix-run/react-router/pull/10377), [#10409](https://github.com/remix-run/react-router/pull/10409))
+- Allow `useRevalidator()` to resolve a loader-driven error boundary scenario ([#10369](https://github.com/remix-run/react-router/pull/10369))
+- Avoid unnecessary unsubscribe/resubscribes on router state changes ([#10409](https://github.com/remix-run/react-router/pull/10409))
+- When using a `RouterProvider`, `useNavigate`/`useSubmit`/`fetcher.submit` are now stable across location changes, since we can handle relative routing via the `@remix-run/router` instance and get rid of our dependence on `useLocation()`. When using `BrowserRouter`, these hooks remain unstable across location changes because they still rely on `useLocation()`. ([#10336](https://github.com/remix-run/react-router/pull/10336))
+- Updated dependencies:
+  - `@remix-run/router@1.6.0`
+
 ## 6.10.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,9 +2,9 @@
 
 The `react-router` package is the heart of [React Router](https://github.com/remix-run/react-router) and provides all
 the core functionality for both
-[`react-router-dom`](/packages/react-router-dom)
+[`react-router-dom`](https://github.com/remix-run/react-router/tree/main/packages/react-router-dom)
 and
-[`react-router-native`](/packages/react-router-native).
+[`react-router-native`](https://github.com/remix-run/react-router/tree/main/packages/react-router-native).
 
 If you're using React Router, you should never `import` anything directly from
 the `react-router` package, but you should have everything you need in either

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router v0.0.0-experimental-af76d50e
+ * React Router v0.0.0-experimental-dc8656c8
  *
  * 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") {
@@ -171,23 +172,40 @@ function useMatch(pattern) {
  * The interface for the navigate() function returned from useNavigate().
  */
 
+const navigateEffectWarning = "You should call navigate() in a React.useEffect(), not when " + "your component is first rendered."; // Mute warnings for calls to useNavigate in SSR environments
+
+function useIsomorphicLayoutEffect(cb) {
+  let isStatic = React.useContext(NavigationContext).static;
+
+  if (!isStatic) {
+    // We should be able to get rid of this once react 18.3 is released
+    // See: https://github.com/facebook/react/pull/26395
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useLayoutEffect(cb);
+  }
+}
 /**
  * Returns an imperative method for changing the location. Used by <Link>s, but
  * may also be used by other elements to change the location.
  *
  * @see https://reactrouter.com/hooks/use-navigate
  */
+
+
 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() {
   !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.
   "useNavigate() may be used only in the context of a <Router> component.") : UNSAFE_invariant(false) : void 0;
+  let dataRouterContext = React.useContext(DataRouterContext);
   let {
     basename,
     navigator
@@ -200,7 +218,7 @@ function useNavigateUnstable() {
   } = useLocation();
   let routePathnamesJson = JSON.stringify(UNSAFE_getPathContributingMatches(matches).map(match => match.pathnameBase));
   let activeRef = React.useRef(false);
-  React.useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     activeRef.current = true;
   });
   let navigate = React.useCallback(function (to, options) {
@@ -208,7 +226,9 @@ function useNavigateUnstable() {
       options = {};
     }
 
-    process.env.NODE_ENV !== "production" ? UNSAFE_warning(activeRef.current, "You should call navigate() in a React.useEffect(), not when " + "your component is first rendered.") : void 0;
+    process.env.NODE_ENV !== "production" ? UNSAFE_warning(activeRef.current, navigateEffectWarning) : void 0; // Short circuit here since if this happens on first render the navigate
+    // is useless because we haven't wired up our history listener yet
+
     if (!activeRef.current) return;
 
     if (typeof to === "number") {
@@ -217,16 +237,18 @@ function useNavigateUnstable() {
     }
 
     let path = resolveTo(to, JSON.parse(routePathnamesJson), locationPathname, options.relative === "path"); // If we're operating within a basename, prepend it to the pathname prior
-    // to handing off to history.  If this is a root navigation, then we
-    // navigate to the raw basename which allows the basename to have full
-    // control over the presence of a trailing slash on root links
+    // to handing off to history (but only if we're not in a data router,
+    // otherwise it'll prepend the basename inside of the router).
+    // If this is a root navigation, then we navigate to the raw basename
+    // which allows the basename to have full control over the presence of a
+    // trailing slash on root links
 
-    if (basename !== "/") {
+    if (dataRouterContext == null && basename !== "/") {
       path.pathname = path.pathname === "/" ? basename : joinPaths([basename, path.pathname]);
     }
 
     (!!options.replace ? navigator.replace : navigator.push)(path, options.state, options);
-  }, [basename, navigator, routePathnamesJson, locationPathname]);
+  }, [basename, navigator, routePathnamesJson, locationPathname, dataRouterContext]);
   return navigate;
 }
 
@@ -558,6 +580,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 {
@@ -568,7 +598,8 @@ function _renderMatches(matches, parentMatches, dataRouterState) {
         match: match,
         routeContext: {
           outlet,
-          matches
+          matches,
+          isDataRoute: dataRouterState != null
         },
         children: children
       });
@@ -585,7 +616,8 @@ function _renderMatches(matches, parentMatches, dataRouterState) {
       children: getChildren(),
       routeContext: {
         outlet: null,
-        matches
+        matches,
+        isDataRoute: true
       }
     }) : getChildren();
   }, null);
@@ -803,11 +835,20 @@ function useNavigateStable() {
     router
   } = useDataRouterContext(DataRouterHook.UseNavigateStable);
   let id = useCurrentRouteId(DataRouterStateHook.UseNavigateStable);
+  let activeRef = React.useRef(false);
+  useIsomorphicLayoutEffect(() => {
+    activeRef.current = true;
+  });
   let navigate = React.useCallback(function (to, options) {
     if (options === void 0) {
       options = {};
     }
 
+    process.env.NODE_ENV !== "production" ? UNSAFE_warning(activeRef.current, navigateEffectWarning) : void 0; // Short circuit here since if this happens on first render the navigate
+    // is useless because we haven't wired up our router subscriber yet
+
+    if (!activeRef.current) return;
+
     if (typeof to === "number") {
       router.navigate(to);
     } else {
@@ -836,16 +877,10 @@ function RouterProvider(_ref) {
     fallbackElement,
     router
   } = _ref;
-  let [state, setState] = React.useState(router.state); // Need to use a layout effect here so we are subscribed early enough to
+  // Need to use a layout effect here so we are subscribed early enough to
   // pick up on any render-driven redirects/navigations (useEffect/<Navigate>)
-
-  React.useLayoutEffect(() => {
-    return router.subscribe(newState => {
-      if (newState !== state) {
-        setState(newState);
-      }
-    });
-  }, [router, state]);
+  let [state, setState] = React.useState(router.state);
+  React.useLayoutEffect(() => router.subscribe(setState), [router, setState]);
   let navigator = React.useMemo(() => {
     return {
       createHref: router.createHref,
@@ -955,22 +990,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;
 }