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.
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 "/"
.
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>