TanStack•2y ago•

2 replies

colossal-harlequin

Route-based sidebar issues

I'm attempting to implement a route in my application (route

/foo

/foo

) that itself displays fullscreen. Upon clicking a link on the page, I attempt to navigate to

/foo/$id/steps

/foo/$id/steps

. This should open a side-panel (drawer) that overlaps the existing

/foo

/foo

route's content. Additionally, a link is available inside the side-panel to navigate from

/foo/$id/steps

/foo/$id/steps

–>

/foo/$id/connect

/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

/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!

TanStack•2y ago•

2 replies

colossal-harlequin

Route-based sidebar issues

I'm attempting to implement a route in my application (route

/foo

/foo

) that itself displays fullscreen. Upon clicking a link on the page, I attempt to navigate to

/foo/$id/steps

/foo/$id/steps

. This should open a side-panel (drawer) that overlaps the existing

/foo

/foo

route's content. Additionally, a link is available inside the side-panel to navigate from

/foo/$id/steps

/foo/$id/steps

–>

/foo/$id/connect

/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

/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!

Route-based sidebar issues

Similar Threads

Route-based sidebar issues

Similar Threads

Similar Threads

Similar Threads