How can I navigate to a nested Route in React Router Dom V6

Question

I'm trying to open a nested Route from within a nav element. The App itself runs under /app (as such I redirect any non existing URL to /app). Within the rendered Layout Component inside the /app Route I'm creating the main navigation as well as the Routes which should ultimately be the content. However once I click on Search or View, the URL gets changed to the correct path, but immediately redirects me to the /app it's as if the Routes "search" and "view" themself were non existent.

Minimal Example:

https://codesandbox.io/s/fragrant-field-ygwbf

App.tsx

 <BrowserRouter>
    <Routes>
       <Route path="/app" element={<Layout />} />
       <Route path="*" element={<Navigate to="/app" />} />
    </Routes>
 </BrowserRouter>

Layout.tsx

const Layout = () => {
  const navigate = useNavigate();
  const handleSearchClick = (e: any) => {
    e.preventDefault();
    // do some tasks
    navigate("inventory/search");
  };

  const handleViewClick = (e: any) => {
    e.preventDefault();
    // do some tasks
    navigate("inventory/view");
  };

  return (
    <div>
      <nav>
        <button onClick={handleSearchClick}>Search</button>
        <button onClick={handleViewClick}>View</button>
      </nav>
      <Routes>
        <Route path="/users">
          <Route path="about" element={<p>example</p>} />
        </Route>
        <Route path="/inventory">
          <Route path="search" element={<Search />} />
          <Route path="view" element={<View />} />
        </Route>
      </Routes>
      The content of search / view should now be displayed below the
      Buttons
    </div>
  );
};

Thanks for any advice

nima · Accepted Answer · 2021-11-13T10:01:34.087

The Problem

Take a look at the browser console, it shows you:

You rendered descendant (or called useRoutes()) at "/app" (under ) 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.

So, the nested routes (deeper navigation according to the documentation) will never render and you cant see the Search and View sub-routes.

update (Thanks to Drew Reese):

in v6 all route paths are always exactly matched, no more path prefix matching like in v4/5. The parent/root paths need to specify the * wildcard so they can now "prefix" match.

The Solution

Please change the parent <Route path="/app"> to <Route path="/app/*">.

So in the App.tsx:

<BrowserRouter>
    <Routes>
       <Route path="/app/*" element={<Layout />} />
       <Route path="*" element={<Navigate to="/app" />} />
    </Routes>
 </BrowserRouter>

Edit on codesandbox

This is because in v6 all route paths are *always* **exactly** matched, no more path prefix matching like in v4/5. The parent/root paths need to specify the `*` wildcard so they can now "prefix" match. — Drew Reese, Nov 12 '21 at 16:29

How can I navigate to a nested Route in React Router Dom V6

1 Answers1

The Problem

The Solution