I am trying to created a nested for a child component

Question

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.

Answer 1

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>