Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: navigate doesn't work with nested routes #8844

Closed
manavana-pierroldin opened this issue May 4, 2022 · 1 comment
Closed

[Bug]: navigate doesn't work with nested routes #8844

manavana-pierroldin opened this issue May 4, 2022 · 1 comment
Labels

Comments

@manavana-pierroldin
Copy link

manavana-pierroldin commented May 4, 2022

What version of React Router are you using?

V6

Steps to Reproduce

you have some nested routes:

<Routes>
      <Route path="/personnel/:id" >
            <Route path="" element={<AuthGuard ROLE="ACQUISITION"><Principale /> </AuthGuard>}>
              <Route path="acquisition" element={<GestionAcquisition />}>
                <Route 
                  path="" 
                  element={<TableauDeBordAcquisition/>}
                  />
                <Route 
                  path="appelsoffres" 
                  element={<AppelsOffres />}
                  />
                <Route
                  path="appelsoffres/:idAppel"
                  element={<DetailAppelOffre />}
                  /> 
                <Route
                  path="creationappelsoffres"
                  element={<CreationAppelOffre />}
                  />
                <Route path="offres" element={<Offres/>} />
                <Route
                  path="offres/:idOffre"
                  element={<DetailsOffre/>}
                />
                <Route
                  path="creationoffres"
                  element={<CreationOffre/>}
                />
                <Route path="marche" element={<Marche />} />

                <Route path="fournisseurs" element={<Fournisseurs />} />
              </Route>
            </Route>
          </Route>
</Routes>

you try to use navigate to jump to one of these locations:
navigate("/personnel/1/acquisition/appelsoffres")

Expected Behavior

should redirect to the mentioned location, but no, (this works perfectly with non nested routes)

Actual Behavior

you get the follwing error:

TypeError: Cannot read properties of undefined (reading 'pathname')
at resolveTo (router.ts:549:1)
at hooks.tsx:252:1
at mountMemo (react-dom.development.js:15846:1)
at Object.useMemo (react-dom.development.js:16219:1)
at useMemo (react.development.js:1532:1)
at useResolvedPath (hooks.tsx:252:1)
at useHref (hooks.tsx:40:1)
at LinkWithRef (index.tsx:267:1)
at renderWithHooks (react-dom.development.js:14985:1)
at updateForwardRef (react-dom.development.js:17044:1)``

@timdorr
Copy link
Member

timdorr commented May 4, 2022

Duplicate of #8489

@timdorr timdorr marked this as a duplicate of #8489 May 4, 2022
@timdorr timdorr closed this as completed May 4, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants