harsh-harlequin

protected endpoint with lazy loader & directories

Hi, I've got a _auth.tsx that uses the guide from Authenticated routes. How would I move e.g. my /settings page into a directory but yet keep _auth.tsx ? Is it as simple as:

/settings (folder)
/settings/_auth.settings.lazy.tsx

/settings (folder)
/settings/_auth.settings.lazy.tsx

21 Replies

eastern-cyan•15mo ago

can you please post the full directory tree?

harsh-harlequinOP•15mo ago

i just created the folder and moved my file in there.

harsh-harlequinOP•15mo ago

for a trial / error 🙈

eastern-cyan•15mo ago

no that won't work either

routes/
  _auth.tsx
  _auth/
       settings/
         route.lazy.tsx

routes/
  _auth.tsx
  _auth/
       settings/
         route.lazy.tsx

routes/
  _auth.tsx
  _auth/
       settings.lazy.tsx

routes/
  _auth.tsx
  _auth/
       settings.lazy.tsx

routes/
  _auth.tsx
  _auth.settings.lazy.tsx

routes/
  _auth.tsx
  _auth.settings.lazy.tsx

harsh-harlequinOP•15mo ago

aha, those makes more sense. I wanted to leverage the folder setup because the theme / ui i'm using is having multiple components that links together. it might be a next thing and i'm on react. does that make sense?

eastern-cyan•15mo ago

sure, the folder allows you to co-locate the components next to the route you just make sure your component files wont be interpreted as route files

harsh-harlequinOP•15mo ago

so i could more or less copy https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/forms into my route folder ( except the components folder) ?

GitHub

ui/apps/www/app/(app)/examples/forms at main · shadcn-ui/ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. - shadcn-ui/ui

eastern-cyan•15mo ago

you can also have a component folder there, it just needs to excluded. check out https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing#options - routeFileIgnorePrefix or - routeFileIgnorePattern

File-Based Routing | TanStack Router React Docs

Most of the TanStack Router documentation is written for file-based routing and is intended to help you understand in more detail how to configure file-based routing and the technical details behind how it works. While file-based routing is the preferred and recommended way to configure TanStack Router, you can also use code-based routing if yo...

harsh-harlequinOP•15mo ago

ohh, so if i don't want to have it end up e.g. in my route path i simply just exclude them with - ?

eastern-cyan•15mo ago

yes or another prefix if you configure it but the default is -

harsh-harlequinOP•15mo ago

ya. awesome 😄 thanks for the input / help. i will continue struggle learning all of this :peepoGiggle:

eastern-cyan•15mo ago

happy building

harsh-harlequinOP•15mo ago

btw. the "lock" stuff with _auth.tsx i have tried finding stuff in the docs about it .. but haven't found any. other than authentication routes, mention to create the files.. thats about it

eastern-cyan•15mo ago

that did not help? https://tanstack.com/router/v1/docs/framework/react/guide/authenticated-routes

Authenticated Routes | TanStack Router React Docs

Authentication is an extremely common requirement for web applications. In this guide, we'll walk through how to use TanStack Router to build protected routes, and how to redirect users to login if they try to access them. The route.beforeLoad Option

harsh-harlequinOP•15mo ago

not other than it mentions beforeLoad and i can see the file is named _authenticated.tsx

eastern-cyan•15mo ago

harsh-harlequinOP•15mo ago

e.g. the redirecting part

eastern-cyan•15mo ago

it links to the example https://tanstack.com/router/v1/docs/framework/react/examples/authenticated-routes

React TanStack Router Authenticated Routes Example | TanStack Route...

An example showing how to implement Authenticated Routes in React using TanStack Router.

eastern-cyan•15mo ago

for full details

harsh-harlequinOP•15mo ago