Update changelogs for useResolvedSplat example

remix-run · Dec 15, 2023 · cc4436c · cc4436c
1 parent d9b36f6
commit cc4436c
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 8 deletions.
diff --git a/docs/hooks/use-resolved-path.md b/docs/hooks/use-resolved-path.md
@@ -60,20 +60,30 @@ And then it gets worse if you define the splat route as a child:
 <BrowserRouter>
   <Routes>
     <Route path="/dashboard">
-      <Route index path="*" element={<Dashboard />} />
+      <Route path="*" element={<Dashboard />} />
     </Route>
   </Routes>
 </BrowserRouter>
 ```
 
 - Now, `useResolvedPath(".")` and `useResolvedPath("..")` resolve to the exact same path inside `<Dashboard />`
-- If you were using a Data Router and defined an `action` on the splat route, you'd get a 405 error on `<Form>` submissions because they (by default) submit to `"."` which would resolve to the parent `/dashboard` route which doesn't have an `action`.
+- If you were using a Data Router and defined an `action` on the splat route, you'd get a 405 error on `<Form>` submissions inside `<Dashboard>` because they (by default) submit to `"."` which would resolve to the parent `/dashboard` route which doesn't have an `action`.
 
 ### Behavior with the flag
 
 When you enable the flag, this "bug" is fixed so that path resolution is consistent across all route types, and `useResolvedPath(".")` always resolves to the current pathname for the contextual route. This includes any dynamic param or splat param values.
 
-If you want to navigate between "sibling" routes within a splat route, it is suggested you move your splat route to it's own child (`<Route index path="*" element={<Dashboard />} />`) and use `useResolvedPath("../teams")` and `useResolvedPath("../projects")` parent-relative paths to navigate to sibling `/dashboard` routes.
+If you want to navigate between "sibling" routes within a splat route, it is suggested you move your splat route to it's own child and use `useResolvedPath("../teams")` and `useResolvedPath("../projects")` parent-relative paths to navigate to sibling `/dashboard` routes. Note that here we also use `index` so that the URL `/dashboard` also renders the `<Dashboard>` component.
+
+```jsx
+<BrowserRouter>
+  <Routes>
+    <Route path="/dashboard">
+      <Route index path="*" element={<Dashboard />} />
+    </Route>
+  </Routes>
+</BrowserRouter>
+```
 
 [navlink]: ../components/nav-link
 [resolvepath]: ../utils/resolve-path

diff --git a/packages/react-router-dom-v5-compat/CHANGELOG.md b/packages/react-router-dom-v5-compat/CHANGELOG.md
@@ -108,7 +108,7 @@
   <BrowserRouter>
     <Routes>
       <Route path="dashboard">
-        <Route path="*" element={<Dashboard />} />
+        <Route index path="*" element={<Dashboard />} />
       </Route>
     </Routes>
   </BrowserRouter>

diff --git a/packages/react-router-dom/CHANGELOG.md b/packages/react-router-dom/CHANGELOG.md
@@ -108,7 +108,7 @@
   <BrowserRouter>
     <Routes>
       <Route path="dashboard">
-        <Route path="*" element={<Dashboard />} />
+        <Route index path="*" element={<Dashboard />} />
       </Route>
     </Routes>
   </BrowserRouter>

diff --git a/packages/react-router-native/CHANGELOG.md b/packages/react-router-native/CHANGELOG.md
@@ -108,7 +108,7 @@
   <BrowserRouter>
     <Routes>
       <Route path="dashboard">
-        <Route path="*" element={<Dashboard />} />
+        <Route index path="*" element={<Dashboard />} />
       </Route>
     </Routes>
   </BrowserRouter>

diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md
@@ -108,7 +108,7 @@
   <BrowserRouter>
     <Routes>
       <Route path="dashboard">
-        <Route path="*" element={<Dashboard />} />
+        <Route index path="*" element={<Dashboard />} />
       </Route>
     </Routes>
   </BrowserRouter>

diff --git a/packages/router/CHANGELOG.md b/packages/router/CHANGELOG.md
@@ -149,7 +149,7 @@
   <BrowserRouter>
     <Routes>
       <Route path="dashboard">
-        <Route path="*" element={<Dashboard />} />
+        <Route index path="*" element={<Dashboard />} />
       </Route>
     </Routes>
   </BrowserRouter>