Route not match a URL. When using nest the dynamic route-CodePudding

I have my React router routes defined as below.

<BrowserRouter>
 <Routes>
  <Route path="/" element={<App />}>
   <Route path="/flights" element={<Flights />}>
    <Route element={<FlightSearchForm />} index />
    <Route path="flight-results" element={<FlightResults />}>
     <Route path=":flight-id" element={<h1>Yes Lord</h1>} />
    </Route>
   </Route>
   <Route path="/hotels" element={<Hotel />} />
   <Route path="/taxi" element={<Taxi />} />
  </Route>
 </Routes>
</BrowserRouter>

However, if I go to route/flights/flight-results/TK 1956.

I get the error:-

utils.ts:794 No routes matched location /flights/flight-results/TK 1956.

I usually generate a new route for my dynamic routes as follows

<Route path="/flights/flight-results/:flight-id" element={<h1>Yes Lord</h1>} />

But in this context it is infeasible since I want to use the same UI as its parent component using an Outlet component. Please help.

CodePudding user response：

Hi @AmohPrince,

If I'm understanding correctly. Then, You are trying to nest the dynamic route inside the flight-results route. However, the flight-results route does not have a dynamic segment, so it will not be matching this URL /flights/flight-results/TK 1956.

So, You could try this.

<Route path="/flights/flight-results/:flightId" element={<FlightResults />}>
  <Route path=":flightId" element={<h1>Yes Lord</h1>} />
</Route>

When you navigate to a route like /flights/flight-results/TK 1956. The FlightResults component will be rendered with the flightId.