From 2b88aa2048c0d3b8d866bc2b0f973bb4a25557d7 Mon Sep 17 00:00:00 2001
From: Ryan Florence <rpflorence@gmail.com>
Date: Thu, 31 Mar 2022 12:50:09 -0600
Subject: [PATCH] fix: get CompatRoute to match partially

---
 packages/react-router-dom-v5-compat/README.md | 38 +++++++++++--------
 .../lib/components.tsx                        |  1 +
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/packages/react-router-dom-v5-compat/README.md b/packages/react-router-dom-v5-compat/README.md
index 0f9b3f7bbd..9e989f487e 100644
--- a/packages/react-router-dom-v5-compat/README.md
+++ b/packages/react-router-dom-v5-compat/README.md
@@ -256,40 +256,46 @@ BAM 💥 This entire branch of your UI is migrated to v6!
 
 Once your deepest `Switch` components are converted, go up to their parent `<Switch>` and repeat the process. Keep doing this all the way up the tree until all components are migrated to v6 APIs.
 
-If you have `<Routes>` rendered deeper in the tree of a `<Route>`, you'll need to use a **splat path** so that those deeper URLs continue to match.
+When you convert a `<Switch>` to `<Routes>` that has descendant `<Routes>` deeper in its tree, there are a couple things you need to do in both places for everything to continue matching correctly.
 
 👉️ Add splat paths to any `<Route>` with a **descendant** `<Routes>`
 
 ```diff
-  function Ancestor() {
+  function Root() {
     return (
--     <Switch>
--       <CompatRoute path="/projects" component={Descendant} />
--     </Switch>
-+     <Routes>
-+       {/* Note the trailing "*" in the path! */}
-+       <Route path="/projects/*" element={<Descendant />} />
-+     </Routes>
+      <Routes>
+-       <Route path="/projects" element={<Projects />} />
++       <Route path="/projects/*" element={<Projects />} />
+      </Routes>
     );
   }
+```
+
+This ensures deeper URLs like `/projects/123` continue to match that route. Note that this isn't needed if the route doesn't have any descendant `<Routes>`.
 
-  // This one was already migrated earlier but it won't match anymore
-  // if you don't add the "*" when you change <Switch> to <Routes>
-  function Descendant() {
+👉 Convert route paths from absolute to relative paths
+
+```diff
+- function Projects(props) {
+-   let { match } = props
+  function Projects() {
     return (
       <div>
         <h1>Projects</h1>
         <Routes>
-          <Route path="activity" element={<ProjectsActivity />} />
-          <Route path=":projectId" element={<Project />} />
-          <Route path=":projectId/edit" element={<EditProject />} />
+-         <Route path={match.path + "/activity"} element={<ProjectsActivity />} />
+-         <Route path={match.path + "/:projectId"} element={<Project />} />
+-         <Route path={match.path + "/:projectId/edit"} element={<EditProject />} />
++         <Route path="activity" element={<ProjectsActivity />} />
++         <Route path=":projectId" element={<Project />} />
++         <Route path=":projectId/edit" element={<EditProject />} />
         </Routes>
       </div>
     );
   }
 ```
 
-The splat is only needed for routes with **descendant routes** in their tree.
+Usually descendant Switch (and now Routes) were using the ancestor `match.path` to build their entire path. When the ancestor Switch is converted to `<Routes>` you no longer need to do this this manually, it happens automatically. Also, if you don't change them to relative paths, they will no longer match, so you need to do this step.
 
 ### 6) Remove the compatibility package!
 
diff --git a/packages/react-router-dom-v5-compat/lib/components.tsx b/packages/react-router-dom-v5-compat/lib/components.tsx
index 916bb5e2dc..fd5eefb65d 100644
--- a/packages/react-router-dom-v5-compat/lib/components.tsx
+++ b/packages/react-router-dom-v5-compat/lib/components.tsx
@@ -15,6 +15,7 @@ import { Router, Routes, Route } from "../react-router-dom";
 // but not worried about that for now.
 export function CompatRoute(props: any) {
   let { path } = props;
+  if (!props.exact) path += "/*";
   return (
     <Routes>
       <Route path={path} element={<RouteV5 {...props} />} />