From 38933fcf0824ab5b61cfc920cec24dd91a89d3e1 Mon Sep 17 00:00:00 2001
From: Matt Sutkowski <msutkowski@gmail.com>
Date: Thu, 9 Dec 2021 17:21:32 -0500
Subject: [PATCH] chore: update descendant routes warning (#8202)

---
 .../descendant-routes-warning-test.tsx        | 44 +++++++++++++++++--
 packages/react-router/index.tsx               |  2 +-
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/packages/react-router/__tests__/descendant-routes-warning-test.tsx b/packages/react-router/__tests__/descendant-routes-warning-test.tsx
index e7cacaed84..52588870a2 100644
--- a/packages/react-router/__tests__/descendant-routes-warning-test.tsx
+++ b/packages/react-router/__tests__/descendant-routes-warning-test.tsx
@@ -52,9 +52,47 @@ describe("Descendant <Routes>", () => {
       });
 
       expect(consoleWarn).toHaveBeenCalledTimes(1);
-      expect(consoleWarn).toHaveBeenCalledWith(
-        expect.stringContaining("child routes will never render")
-      );
+
+      expect(consoleWarn.mock.calls[0][0])
+        .toMatch(`You rendered descendant <Routes> (or called \`useRoutes()\`) at "/courses/react" (under <Route path="react">) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.
+
+Please change the parent <Route path="react"> to <Route path="react/*">.`);
+    });
+  });
+
+  describe("when the parent route path does not have a trailing * and is the root", () => {
+    it("warns once when you visit the parent route and only shows a hint like *", () => {
+      function ReactCourses() {
+        return (
+          <div>
+            <h1>React</h1>
+
+            <Routes>
+              <Route
+                path="/react-fundamentals"
+                element={<h1>React Fundamentals</h1>}
+              />
+            </Routes>
+          </div>
+        );
+      }
+
+      TestRenderer.act(() => {
+        TestRenderer.create(
+          <MemoryRouter initialEntries={["/"]}>
+            <Routes>
+              <Route path="/" element={<ReactCourses />} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(consoleWarn).toHaveBeenCalledTimes(1);
+
+      expect(consoleWarn.mock.calls[0][0])
+        .toMatch(`You rendered descendant <Routes> (or called \`useRoutes()\`) at "/" (under <Route path="/">) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.
+
+Please change the parent <Route path="/"> to <Route path="*">.`);
     });
   });
 
diff --git a/packages/react-router/index.tsx b/packages/react-router/index.tsx
index 054547f25c..34de7a6738 100644
--- a/packages/react-router/index.tsx
+++ b/packages/react-router/index.tsx
@@ -663,7 +663,7 @@ export function useRoutes(
         `deeper, the parent won't match anymore and therefore the child ` +
         `routes will never render.\n\n` +
         `Please change the parent <Route path="${parentPath}"> to <Route ` +
-        `path="${parentPath}/*">.`
+        `path="${parentPath === "/" ? "*" : `${parentPath}/*`}">.`
     );
   }