Question 291960 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React router dom navigating to wrong path

We are using React-Router-DOM v6.19.0 and there are two you can find below.

<Route path="/route1/*" element={<RouteOneList />} />
<Route path="/route1/:one/:two/:three" element={<RouteAnother />} />

and in RouteOneList it has sub routes

<Route path="/add/:type/:id" element={<AddComponent />} />

Here I am trying to access

"/route1/add/test/1" – It is supposed to load AddComponent but it’s falling into <RouteAnother /> component.

Is there any way tackle this problem? I have tried changing the order but that also not helped me.

Tags:

2

Answers


  1. 0 
    // App component
import { Routes, Route, Outlet } from 'react-router-dom';
import RouteOneList from './RouteOneList';
import RouteAnother from './RouteAnother';

function App() {
  return (
    <Routes>
      {/* More specific routes should come before catch-all routes */}
      <Route
        path="/route1/add/:type/:id"
        element={<RouteOneList />} // or element={<AddComponent />}
      />
      <Route path="/route1/:one/:two/:three" element={<RouteAnother />} />
      <Route path="/route1/*" element={<RouteOneList />} />
    </Routes>
  );
}

export default App;

    Make sure to utilize Outlet to render the child routes in RouteOneList:

    // RouteOneList component
import { Routes, Route, Outlet } from 'react-router-dom';
import AddComponent from './AddComponent';

function RouteOneList() {
  return (
    <div>
      {/* Your existing content */}
      <h2>RouteOneList Content</h2>

      {/* Use Outlet to render child routes */}
      <Outlet />

      {/* Additional content if needed */}
    </div>
  );
}

export default RouteOneList;

    When you access /route1/add/test/1 with this configuration, it should match the more specific route "/route1/add/:type/:id" and render the AddComponent within the RouteOneList.

    Login or Signup to reply.
  2. 0

    Issue

    The issue here is that the Routes component only handles matching the routes it renders directly. The "/route1/add/test/1" path can be matched by the "/route1/:one/:two/:three" path and so that is what is matched and rendered.

    Solution

    Based on your comment in another answer that RouteOneList is a layout with a button I suggest actually using it as a layout route. Instead of RouteOneList rendering descendent routes it should instead render an Outlet component for nested routes. This is so the main Routes component can know of and match "/route1/:one/:two/:three" and "/route1/add/:type/:id".

    import { Outlet } from 'react-router-dom';

const RouteOneList = () => (
  <>
    ...
    <Outlet />
    ...
  </>
);

    <Routes> // <-- knows of all routes for matching/rendering
  <Route path="/route1">
    <Route element={<RouteOneList />}> // <-- layout route
      <Route path="add/:type/:id" element={<AddComponent />} />
    </Route>
    <Route path=":one/:two/:three" element={<RouteAnother />} />
  </Route>
</Routes>

    Demo

    Edit react-router-dom-navigating-to-wrong-path

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search