absent-sapphire

how to do route groups?

Is there a way to do route groups for the same "/" path, like in next.js? (https://nextjs.org/docs/app/building-your-application/routing/route-groups) So we would have / (home page uses <Root /> component as a layout /sign-in (sign in page uses <AuthRoot /> component as a layout instead of Root and also uses <Outlet />

Routing: Route Groups

Route Groups can be used to partition your Next.js application into different sections.

9 Replies

genetic-orange•3y ago

Not entirely sure what you're looking to solve but if I'm understanding you correctly, you can use Authenticated Routes for checking sign in + pathless routes to do your grouping so for instance I do RootTree - ProtectedRoute (pathless) - / - /user - /settings - /sign-in

absent-sapphireOP•3y ago

@sowhatdoido I want to have a different layout for /sign-in and /sign-out (authlayout) and / and /about (marketing layout) @sowhatdoido Figured it out. I read through the docs for pathless routes a little more after you mentioned in and here's the solution:

const rootRoute = new RootRoute({ component: Root });

const marketingRoute = new Route({
  getParentRoute: () => rootRoute,
  id: 'marketing',
  component: MarketingLayout,
});

const indexRoute = new Route({
  getParentRoute: () => marketingRoute,
  path: '/',
  component: Homepage,
});

const authRoute = new Route({
  getParentRoute: () => rootRoute,
  id: 'auth',
  component: AuthLayout,
});

const signupRoute = new Route({
  getParentRoute: () => authRoute,
  path: '/sign-up',
  component: SignUp,
});

const signInRoute = new Route({
  getParentRoute: () => authRoute,
  path: '/sign-in',
  component: SignIn,
});

const rootRoute = new RootRoute({ component: Root });

const marketingRoute = new Route({
  getParentRoute: () => rootRoute,
  id: 'marketing',
  component: MarketingLayout,
});

const indexRoute = new Route({
  getParentRoute: () => marketingRoute,
  path: '/',
  component: Homepage,
});

const authRoute = new Route({
  getParentRoute: () => rootRoute,
  id: 'auth',
  component: AuthLayout,
});

const signupRoute = new Route({
  getParentRoute: () => authRoute,
  path: '/sign-up',
  component: SignUp,
});

const signInRoute = new Route({
  getParentRoute: () => authRoute,
  path: '/sign-in',
  component: SignIn,
});

thanks

genetic-orange•3y ago

Glad you figured it out!

deep-jade•3y ago

Did you figure out how to do it with file based routes ? @Tanner Linsley Next uses the (filename) convention to define a directory as a group of routes without impacting the path

correct-apricot•3y ago

Use id instead of path

deep-jade•3y ago

Is it possible to do it with filesystem routing ?

genetic-orange•3y ago

_ Prefix: Routes segments with this prefix behave normally but don't contribute the prefixed part to the URL pathname.

_ Prefix: Routes segments with this prefix behave normally but don't contribute the prefixed part to the URL pathname.

couldn't you use that to define your group and add authentication as described above?

deep-jade•3y ago

Actually, it creates an id instead of a route path. Here is the generated code:

Object.assign(MyDirMyRouteRoute.options, {
  id: "/myDir/myRoute",
  getParentRoute: () => rootRoute,
})

Object.assign(MyDirMyRouteRoute.options, {
  id: "/myDir/myRoute",
  getParentRoute: () => rootRoute,
})

It becomes a route if I add a layout file _myDir.tsx at the same level that _myDir directory. I believe the DX would benefit greatly if layout files were made optional and could be located within the myDir directory itself.

deep-jade•3y ago

The doc about this feature could also be improved to help understanding these behaviors Also this part of the doc could be explained with an example:

_ Suffix: Routes segments with this suffix will only be wrapped with parent routes down to the path with the underscore prefix (but not including it).

@Tanner Linsley I hope the feedback helps

Gaming

Programming

how to do route groups?

Did you find this page helpful?