T
TanStack•16mo ago
harsh-harlequin

Route-based sidebar issues

I'm attempting to implement a route in my application (route /foo) that itself displays fullscreen. Upon clicking a link on the page, I attempt to navigate to /foo/$id/steps. This should open a side-panel (drawer) that overlaps the existing /foo route's content. Additionally, a link is available inside the side-panel to navigate from /foo/$id/steps –> /foo/$id/connect, which replaces a subset of the side-panel's contents with different contents. Utilizing React Router V6, I was able to achieve this via roughly the following snippet React Router V6 
<Routes>
  <Route to='/foo' element={<Foo />}>
    <Route to=':id' element={<SidePanel /> /* NOTE: renders an outlet internally */}>
      <Route to='/steps' element={<Steps />} />
      <Route to='/connect' element={<Connect />} />
    </Route>
  </Route>
</Routes>
<Routes>
  <Route to='/foo' element={<Foo />}>
    <Route to=':id' element={<SidePanel /> /* NOTE: renders an outlet internally */}>
      <Route to='/steps' element={<Steps />} />
      <Route to='/connect' element={<Connect />} />
    </Route>
  </Route>
</Routes>
In attempting to migrate to @tanstack/react-router with code-based routing, I'm doing the following @tanstack/react-router 
const fooRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: 'foo',
  component: Foo,
});

const idRoute = createRoute({
  getParentRoute: () => fooRoute,
  path: '$id',
  component: SidePanel,
});

const stepsRoute = createRoute({
  getParentRoute: () => idRoute,
  path: 'steps',
  component: Steps,
});

const connectRoute = createRoute({
  getParentRoute: () => idRoute,
  path: 'connect',
  component: Connect,
});

//...

const routeTree = rootRoute.addChildren({
  fooRoute: fooRoute.addChildren({
    idRoute: idRoute.addChildren({
      stepsRoute,
      connectRoute
    })
  })
})
const fooRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: 'foo',
  component: Foo,
});

const idRoute = createRoute({
  getParentRoute: () => fooRoute,
  path: '$id',
  component: SidePanel,
});

const stepsRoute = createRoute({
  getParentRoute: () => idRoute,
  path: 'steps',
  component: Steps,
});

const connectRoute = createRoute({
  getParentRoute: () => idRoute,
  path: 'connect',
  component: Connect,
});

//...

const routeTree = rootRoute.addChildren({
  fooRoute: fooRoute.addChildren({
    idRoute: idRoute.addChildren({
      stepsRoute,
      connectRoute
    })
  })
})
and other various permutations including pathless routes, but have run into an issue in being able to get the /foo route's content to persist behind the side-panel. When I am able to persist the content, I'm unable to get the side-panel to display. Any help or pointers is greatly appreciated!
2 Replies
itchy-amethyst
itchy-amethyst•16mo ago
the Foo component probably needs to render an <Outlet />. can you please post a minimal complete example by forking one of the existing examples on stackblitz?
harsh-harlequin
harsh-harlequinOP•16mo ago
@Manuel Schiller , the Outlet was the issue – it was still utilizing the Outlet from react-router-dom. Thank you for the help! I swear I had checked that but perhaps not

Did you find this page helpful?