wouter icon indicating copy to clipboard operation
wouter copied to clipboard

Accessing nested params with `useParams`

Open pReya opened this issue 5 months ago • 8 comments

Hello, I have a component setup that looks something like this:

<Provider value={client}>
  <!-- some more stuff here -->
  <Route path="/admin" nest>
    <Switch>
      <Route path="/">
        <RedirectToCompany />
      </Route>
      <Route path="/:companyId" nest>
        <AdminLayout menu={menu}>
          <Switch>
            <Route path="/seminare">
              <SeminarPage />
            </Route>
            <Route path="/">
              <Redirect to="/seminare" />
            </Route>
          </Switch>
        </AdminLayout>
      </Route>
    </Switch>
  </Route>
</Provider>

I'd like to access my companyId param within my <SeminarPage> component, which is nested inside another route, via useParams(). However I always get an empty object. I assume because useParams() will always use the params from the closest ancestor <Route> component. With nested routes, is there any way to access "higher up" params?

pReya avatar Jan 23 '24 16:01 pReya