Allow navigation in child useEffects and fix intermittent issue where browser automation fails to navigate due to race conditions.

.github/workflows/no-response.yml

@@ -0,0 +1,26 @@
+name: 🥺 No Response
+
+on:
+  issue_comment:
+    types: [created]
+  schedule:
+    # Schedule for five minutes after the hour, every hour
+    - cron: "5 * * * *"
+
+jobs:
+  noResponse:
+    if: github.repository == 'remix-run/react-router'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 🥺 Handle Ghosting
+        uses: lee-dohm/[email protected]
+        with:
+          closeComment: >
+            This issue has been automatically closed because we haven't received a
+            response from the original author 🙈. This automation helps keep the issue
+            tracker clean from issues that are unactionable. Please reach out if you
+            have more information for us! 🙂
+          daysUntilClose: 10
+          responseRequiredLabel: needs-response
+          token: ${{ github.token }}

CONTRIBUTING.md

@@ -1 +1 @@
-Please see [our guide to contributing](docs/contributing.md).
+Please see [our guide to contributing](docs/guides/contributing.md).

contributors.yml

@@ -1,5 +1,6 @@
 - abhi-kr-2100
 - Ajayff4
+- alexlbr
 - avipatel97
 - awreese
 - bhbs
@@ -36,10 +37,13 @@
 - liuhanqu
 - lqze
 - lukerSpringTree
+- marc2332
 - markivancho
 - mcansh
 - mfijas
+- michal-antczak
 - morleytatro
+- ms10596
 - noisypigeon
 - paulsmithkc
 - petersendidit
@@ -51,10 +55,13 @@
 - shamsup
 - shihanng
 - shivamsinghchahar
+- tanayv
 - thisiskartik
 - ThornWu
 - timdorr
 - tkindy
 - turansky
 - underager
 - vijaypushkin
+- vikingviolinist
+- xcsnowcity

docs/components/route.md

@@ -64,6 +64,6 @@ For example, in the following config the parent route renders an `<Outlet>` by d
 </Route>
 ```
 
-[location]: ../hooks/location
+[location]: ../utils/location
 [outlet]: ./outlet
 [use-route]: ../hooks/use-routes

docs/components/routes.md

@@ -64,6 +64,6 @@ For example, in the following config the parent route renders an `<Outlet>` by d
 </Route>
 ```
 
-[location]: ../hook/location
+[location]: ../utils/location
 [outlet]: ./outlet
-[use-route]: ../hooks/use-routes
+[use-routes]: ../hooks/use-routes

docs/getting-started/concepts.md

@@ -171,7 +171,7 @@ The last two, `{ state, key }`, are React Router specific.
 
 **Location Pathname**
 
-This is the part of [URL](#url) after the origin, so for `https://example.com/teams/hotspurs` the pathname is `/teams/hostspurs`. This is the only part of the location that routes match against.
+This is the part of [URL](#url) after the origin, so for `https://example.com/teams/hotspurs` the pathname is `/teams/hotspurs`. This is the only part of the location that routes match against.
 
 **Location Search**
 

docs/getting-started/overview.md

@@ -172,7 +172,7 @@ When the URL is `"/invoices/sent"` the component tree will be:
 </App>
 ```
 
-When the URL is `"/invoices/123"`, the component tree will:
+When the URL is `"/invoices/123"`, the component tree will be:
 
 ```tsx
 <App>

docs/upgrading/v5.md

@@ -891,6 +891,44 @@ To see the exact API of the new `useMatch` hook and its type declaration, check
 
 <!-- TODO: Show examples for refactoring useRouteMatch -->
 
+## Change the order of arguments passed to `matchPath`. Change pathPattern options.
+
+Since version 6 the order of arguments passed to `matchPath` function has changed. Also pattern options has changed.
+
+- first argument is pathPattern object, then comes pathname
+- pathPattern doesn't include `exact` and `strict` options any more. New `caseSensitive` and `end` options has been added.
+
+Please refactor it as follows:
+
+Before:
+
+```js
+// This is a React Router v5 app
+import { matchPath } from "react-router-dom";
+
+const match = matchPath("/users/123", {
+  path: "/users/:id",
+  exact: true, // Optional, defaults to false
+  strict: false, // Optional, defaults to false
+});
+```
+
+After:
+
+```js
+// This is a React Router v6 app
+import { matchPath } from "react-router-dom";
+
+const match = matchPath(
+  {
+    path: "/users/:id",
+    caseSensitive: false, // Optional. Should be `true` if the static portions of the `path` should be matched in the same case.
+    end: true, // Optional. Should be `true` if this pattern should match the entire URL pathname
+  },
+  "/users/123"
+);
+```
+
 ## `<Prompt>` is not currently supported
 
 `<Prompt>` from v5 (along with `usePrompt` and `useBlocker` from the v6 betas) are not included in the current released version of v6. We decided we'd rather ship with what we have than take even more time to nail down a feature that isn't fully baked. We will absolutely be working on adding this back in to v6 at some point in the near future, but not for our first stable release of 6.x.

packages/react-router-dom-v5-compat/index.ts

@@ -69,7 +69,7 @@ export type {
   Pathname,
   Search,
   RoutesProps,
-} from "./react-router-dom";
+} from "../react-router-dom";
 export {
   BrowserRouter,
   HashRouter,
@@ -108,7 +108,7 @@ export {
   useResolvedPath,
   useRoutes,
   useSearchParams,
-} from "./react-router-dom";
+} from "../react-router-dom";
 
 export type { StaticRouterProps } from "./lib/components";
 export { CompatRouter, CompatRoute, StaticRouter } from "./lib/components";

packages/react-router-dom-v5-compat/lib/components.tsx

@@ -9,7 +9,7 @@ import { useHistory, Route as RouteV5 } from "react-router-dom";
 // We are a wrapper around react-router-dom v6, so bring it in
 // and bundle it because an app can't have two versions of
 // react-router-dom in its package.json.
-import { Router, Routes, Route } from "../react-router-dom";
+import { Router, Routes, Route } from "../../react-router-dom";
 
 // v5 isn't in TypeScript, they'll also lose the @types/react-router with this
 // but not worried about that for now.

packages/react-router-dom/index.tsx

@@ -142,6 +142,8 @@ export interface BrowserRouterProps {
 
 /**
  * A `<Router>` for use in web browsers. Provides the cleanest URLs.
+ *
+ * @see https://reactrouter.com/docs/en/v6/routers/browser-router
  */
 export function BrowserRouter({
   basename,
@@ -181,6 +183,8 @@ export interface HashRouterProps {
 /**
  * A `<Router>` for use in web browsers. Stores the location in the hash
  * portion of the URL so it is not sent to the server.
+ *
+ * @see https://reactrouter.com/docs/en/v6/routers/hash-router
  */
 export function HashRouter({ basename, children, window }: HashRouterProps) {
   let historyRef = React.useRef<HashHistory>();
@@ -218,6 +222,8 @@ export interface HistoryRouterProps {
  * to note that using your own history object is highly discouraged and may add
  * two versions of the history library to your bundles unless you use the same
  * version of the history library that React Router uses internally.
+ *
+ * @see https://reactrouter.com/docs/en/v6/routers/history-router
  */
 function HistoryRouter({ basename, children, history }: HistoryRouterProps) {
   const [state, setState] = React.useState({
@@ -258,6 +264,8 @@ export interface LinkProps
 
 /**
  * The public API for rendering a history-aware <a>.
+ *
+ * @see https://reactrouter.com/docs/en/v6/components/link
  */
 export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
   function LinkWithRef(
@@ -307,6 +315,8 @@ export interface NavLinkProps
 
 /**
  * A <Link> wrapper that knows if it's "active" or not.
+ *
+ * @see https://reactrouter.com/docs/en/v6/components/nav-link
  */
 export const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
   function NavLinkWithRef(
@@ -384,6 +394,8 @@ if (__DEV__) {
  * Handles the click behavior for router `<Link>` components. This is useful if
  * you need to create custom `<Link>` components with the same click behavior we
  * use in our exported `<Link>`.
+ *
+ * @see https://reactrouter.com/docs/en/v6/hooks/use-link-click-handler
  */
 export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
   to: To,
@@ -425,6 +437,8 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
 /**
  * A convenient wrapper for reading and writing search parameters via the
  * URLSearchParams interface.
+ *
+ * @see https://reactrouter.com/docs/en/v6/hooks/use-search-params
  */
 export function useSearchParams(defaultInit?: URLSearchParamsInit) {
   warning(
@@ -498,6 +512,8 @@ export type URLSearchParamsInit =
  *   let searchParams = createSearchParams({
  *     sort: ['name', 'price']
  *   });
+ *
+ * @see https://reactrouter.com/docs/en/v6/utils/create-search-params
  */
 export function createSearchParams(
   init: URLSearchParamsInit = ""

packages/react-router/__tests__/useNavigate-test.tsx

@@ -50,6 +50,77 @@ describe("useNavigate", () => {
     `);
   });
 
+  it("transitions to the new location when called immediately", () => {
+    const Home = React.forwardRef(function Home(_props, ref) {
+      let navigate = useNavigate();
+
+      React.useImperativeHandle(ref, () => ({
+        navigate: () => navigate("/about")
+      }))
+
+      return null
+    })
+
+    let homeRef;
+
+    let renderer: TestRenderer.ReactTestRenderer;
+    renderer = TestRenderer.create(
+      <MemoryRouter initialEntries={["/home"]}>
+        <Routes>
+          <Route path="home" element={<Home ref={(ref) => homeRef = ref} />} />
+          <Route path="about" element={<h1>About</h1>} />
+        </Routes>
+      </MemoryRouter>
+    );
+
+    TestRenderer.act(() => {
+      homeRef.navigate();
+    })
+
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      <h1>
+        About
+      </h1>
+    `);
+  });
+
+  it("allows navigation in child useEffects", () => {
+    function Child({ onChildRendered }) {
+
+      React.useEffect(() => {
+        onChildRendered();
+      });
+
+      return null;
+    }
+
+    function Parent() {
+      let navigate = useNavigate();
+
+      let onChildRendered = React.useCallback(() => navigate("/about"), []);
+
+      return <Child onChildRendered={onChildRendered} />;
+    }
+
+    let renderer: TestRenderer.ReactTestRenderer;
+    TestRenderer.act(() => {
+      renderer = TestRenderer.create(
+        <MemoryRouter initialEntries={["/home"]}>
+          <Routes>
+            <Route path="home" element={<Parent />} />
+            <Route path="about" element={<h1>About</h1>} />
+          </Routes>
+        </MemoryRouter>
+      );
+    });
+
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      <h1>
+        About
+      </h1>
+    `);
+  });
+
   describe("with state", () => {
     it("adds the state to location.state", () => {
       function Home() {
@@ -97,4 +168,6 @@ describe("useNavigate", () => {
       `);
     });
   });
+
+
 });

packages/react-router/lib/components.tsx

@@ -27,7 +27,7 @@ export interface MemoryRouterProps {
 /**
  * A <Router> that stores all entries in memory.
  *
- * @see https://reactrouter.com/docs/en/v6/api#memoryrouter
+ * @see https://reactrouter.com/docs/en/v6/routers/memory-router
  */
 export function MemoryRouter({
   basename,
@@ -72,7 +72,7 @@ export interface NavigateProps {
  * able to use hooks. In functional components, we recommend you use the
  * `useNavigate` hook instead.
  *
- * @see https://reactrouter.com/docs/en/v6/api#navigate
+ * @see https://reactrouter.com/docs/en/v6/components/navigate
  */
 export function Navigate({ to, replace, state }: NavigateProps): null {
   invariant(
@@ -104,7 +104,7 @@ export interface OutletProps {
 /**
  * Renders the child route's element, if there is one.
  *
- * @see https://reactrouter.com/docs/en/v6/api#outlet
+ * @see https://reactrouter.com/docs/en/v6/components/outlet
  */
 export function Outlet(props: OutletProps): React.ReactElement | null {
   return useOutlet(props.context);
@@ -139,7 +139,7 @@ export interface IndexRouteProps {
 /**
  * Declares an element that should be rendered at a certain URL path.
  *
- * @see https://reactrouter.com/docs/en/v6/api#route
+ * @see https://reactrouter.com/docs/en/v6/components/route
  */
 export function Route(
   _props: PathRouteProps | LayoutRouteProps | IndexRouteProps
@@ -167,7 +167,7 @@ export interface RouterProps {
  * router that is more specific to your environment such as a <BrowserRouter>
  * in web browsers or a <StaticRouter> for server rendering.
  *
- * @see https://reactrouter.com/docs/en/v6/api#router
+ * @see https://reactrouter.com/docs/en/v6/routers/router
  */
 export function Router({
   basename: basenameProp = "/",
@@ -247,7 +247,7 @@ export interface RoutesProps {
  * A container for a nested tree of <Route> elements that renders the branch
  * that best matches the current location.
  *
- * @see https://reactrouter.com/docs/en/v6/api#routes
+ * @see https://reactrouter.com/docs/en/v6/components/routes
  */
 export function Routes({
   children,
@@ -265,7 +265,7 @@ export function Routes({
  * either a `<Route>` element or an array of them. Used internally by
  * `<Routes>` to create a route config from its children.
  *
- * @see https://reactrouter.com/docs/en/v6/api#createroutesfromchildren
+ * @see https://reactrouter.com/docs/en/v6/utils/create-routes-from-children
  */
 export function createRoutesFromChildren(
   children: React.ReactNode