javascript - How can I navigate to a nested Route in React Router Dom V6 - Stack Overflow

admin管理员组

文章数量:1326611

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:

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

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

• javascript
• reactjs
• react-router
• react-router-dom

Share Improve this question Follow asked Nov 12, 2021 at 9:55 LavarietLavariet 64522 gold badges99 silver badges1717 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

you can use navigate("view") instead of navigate("/view") Because: the root route link is https://inventory

• with navigate("view") the link would be https://inventory/view
• with navigate("/view") the link would be https://view

Without the *, the parent route doesn't know to match any deeper paths like /parentpath/childpath.( example:/settings/privacy )

<Route path={${ROUTE.SETTINGS}/*} element={isAuthenticated ? : } />

you should use the * inthe app.js ponent then only you can use the nested routing

本文标签： javascriptHow can I navigate to a nested Route in React Router Dom V6Stack Overflow