react-router 0.0.0-experimental-f92aa2e1 → 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-f92aa2e1
+ * 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") {
@@ -192,16 +193,19 @@ 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() {
   !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
@@ -233,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;
 }
 
@@ -574,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 {
@@ -584,7 +598,8 @@ function _renderMatches(matches, parentMatches, dataRouterState) {
         match: match,
         routeContext: {
           outlet,
-          matches
+          matches,
+          isDataRoute: dataRouterState != null
         },
         children: children
       });
@@ -601,7 +616,8 @@ function _renderMatches(matches, parentMatches, dataRouterState) {
       children: getChildren(),
       routeContext: {
         outlet: null,
-        matches
+        matches,
+        isDataRoute: true
       }
     }) : getChildren();
   }, null);
@@ -861,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,
@@ -980,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;
 }