javascriptreactjsreact-routerreact-router-component

I am trying to created a nested for a child component


i am trying to something like this:

 <Route path="/cam/cold/general" element={<General />} /> 
        <Route path='/cam/cold/general/substore' element={<jam />} >
          <Route path=':index' >
            <Route path='/order' element={<jam />} />
          </Route>
   </Route>

each child is meant to have sub sections

but i keep getting this error

router.ts:5 Uncaught Error: Absolute route path "/order" nested under path "/cam/cold/general/substore/:index" is not valid. An absolute child route path must start with the combined path of all its parent routes.

Solution

  • Issue

    Uncaught Error: Absolute route path "/order" nested under path "/cam/cold/general/substore/:index" is not valid. An absolute child route path must start with the combined path of all its parent routes.

    The error is informing you that the absolute path "/order" can't be nested under "/cam/cold/general/substore". When nesting routes you should use relative routes. The difference between absolute and relative paths is the leading "/" character. Absolute paths start with a "/".

    Solution

    Remove the leading "/" from the nested "order" route.

    <Route path="/cam/cold/general" element={<General />} /> 
    <Route path='/cam/cold/general/substore' element={<Jam />} >
      <Route path=':index'>
        <Route path='order' element={<Jam />} />
      </Route>
    </Route>
    

    If you've no other nested routes I suggest to flatten the nesting a bit.

    <Route path="/cam/cold/general" element={<General />} /> 
    <Route path='/cam/cold/general/substore'>
      <Route index element={<Jam />} />
      <Route path=':index/order' element={<Jam />} />
    </Route>