How to use Multiple routes in react native-CodePudding

//Prev.jsx

const handleClick = (row) =>{
  const orderNumber = row.orderNumber.replace(/\D/g, '')
  console.log(orderNumber)
  navigate("/drivers/"   (driverId)   "/"   (orderNumber))
}



//App.js

<BrowserRouter>
  <Routes>
    <Route path="drivers">
    <Route index element={
      <RequaireAuth>
        <Dlist/>
      </RequaireAuth>}>
    </Route>
    <Route path=":driverId" element={<RequaireAuth>
      <PrevSingle/>
    </RequaireAuth>}>
    <Route path="/drivers/driverId/:orderNumber" element={
      <RequaireAuth>
        <PrevSingle/>
      </RequaireAuth>
    }>
    </Route>
  </Route>
</Route>

i got this error No routes matched location /drivers/DEiXkSyMo8Sg2RtvS....../4662....

i tried this way to Uncaught Error: Absolute route path "/:orderNumber" nested under path "/drivers/:driverId" is not valid. An absolute child route path must start with the combined path of all its parent routes.

How to Navigate Multiple Routes Using react-router

<BrowserRouter>
  <Routes>
    <Route path="drivers">
      <Route index element={
        <RequaireAuth>
          <Dlist/>
        </RequaireAuth>
      }>
      </Route>
      <Route path=":driverId" element={
        <RequaireAuth>
          <PrevSingle/>
        </RequaireAuth>
      }>
      <Route path="/:orderNumber" element={
        <PrevSingle/>
      }>
      </Route>
    </Route>
  </Routes>
</BrowserRouter>

and without / like this :orderNumber it will not navigate but will not give any errors also, so what is the wright way to do this

CodePudding user response：

The path "/drivers/DEiXkSyMo8Sg2RtvS....../4662...." isn't matched because there is no route path for the "/drivers/DEiXkSyMo8Sg2RtvS......" prefix part. From what I can tell though you meant for there to be a dynamic "/drivers/:driverId" route as the parent route for "/drivers/:driverId/:orderNumber" route.

If you want to use nested routes then the parent routes should render an Outlet for the nested routes to render their content into, and the nested routes should omit any leading "/" characters so they are specifying relative paths.

<BrowserRouter>
  <Routes>
    <Route path="drivers">
      <Route
        index // <-- "/drivers"
        element={(
          <RequaireAuth>
            <Dlist />
          </RequaireAuth>
        )}
      />
      <Route
        path=":driverId" // <-- "/drivers/:driverId"
        element={(
          <RequaireAuth>
            <PrevSingle/> // <-- renders <Outlet />
          </RequaireAuth>
        )}
      >
        <Route
          path=":orderNumber" // <-- "/drivers/:driverId/:orderNumber"
          element={<PrevSingle />} // <-- rendered into parent's outlet
        />
      </Route>
    </Route>
  </Routes>
</BrowserRouter>

If you want to render as sibling routes then the paths should be fully qualified (note the paths are still relative from the parent route), no Outlet is required.

<BrowserRouter>
  <Routes>
    <Route path="drivers">
      <Route
        index // <-- "/drivers"
        element={(
          <RequaireAuth>
            <Dlist />
          </RequaireAuth>
        )}
      />
      <Route
        path=":driverId" // <-- "/drivers/:driverId"
        element={(
          <RequaireAuth>
            <PrevSingle/>
          </RequaireAuth>
        )}
      />
      <Route
        path=":driverId/:orderNumber" // <-- "/drivers/:driverId/:orderNumber"
        element={<PrevSingle />}
      />
    </Route>
  </Routes>
</BrowserRouter>