81a7e5d62e
* esm * wip * wip * wip * wip * wip * wip * subscription notice * wip * wip * wip * fix envs * fix: update docker build * fix * esm/types * delete dashboard :D * add patches to dockerfiles * update packages + catalogs + ts * wip * remove native libs * ts * improvements * fix redirects and fetching session * try fix favicon * fixes * fix * order and resize reportds within a dashboard * improvements * wip * added userjot to dashboard * fix * add op * wip * different cache key * improve date picker * fix table * event details loading * redo onboarding completely * fix login * fix * fix * extend session, billing and improve bars * fix * reduce price on 10M
119 lines
3.9 KiB
Markdown
119 lines
3.9 KiB
Markdown
# Routing Structure
|
|
|
|
This SaaS application uses TanStack Router with pathless routes (using underscore prefix) for better organization and shared layouts.
|
|
|
|
## Route Structure
|
|
|
|
### Landing Page
|
|
- **Route**: `/`
|
|
- **File**: `src/routes/index.tsx`
|
|
- **Purpose**: Landing page that redirects to latest organization or shows all organizations
|
|
|
|
### Authentication Routes (Pathless Layout: `_auth`)
|
|
- **Layout**: `src/routes/_auth.tsx` - Shared layout for auth pages
|
|
- **Login**: `/login` - `src/routes/_auth.login.tsx`
|
|
- **Onboarding**: `/onboarding` - `src/routes/_auth.onboarding.tsx`
|
|
- **Index**: `/onboarding/` - `src/routes/_auth.onboarding.index.tsx`
|
|
- **Step 1**: `/onboarding/step1` - `src/routes/_auth.onboarding.step1.tsx`
|
|
|
|
### App Routes (Pathless Layout: `_app`)
|
|
- **Layout**: `src/routes/_app.tsx` - Shared layout with sidebar for app pages
|
|
- **Organization**: `/$organizationId` - `src/routes/_app.$organizationId.tsx`
|
|
- **Project**: `/$organizationId/$projectId` - `src/routes/_app.$organizationId.$projectId.tsx`
|
|
|
|
## Pathless Routes
|
|
|
|
### `_auth` Layout
|
|
- **Purpose**: Groups authentication and onboarding routes
|
|
- **Shared Layout**: Clean, centered layout with white background
|
|
- **Routes**: `/login`, `/onboarding/*`
|
|
|
|
### `_app` Layout
|
|
- **Purpose**: Groups organization and project routes
|
|
- **Shared Layout**: Sidebar + main content layout
|
|
- **Routes**: `/$organizationId`, `/$organizationId/$projectId`
|
|
|
|
## Landing Page Behavior
|
|
|
|
The landing page (`/`) intelligently handles user state:
|
|
|
|
1. **If user has a latest organization**: Shows "Continue where you left off" button
|
|
2. **If no latest organization**: Shows login/onboarding options
|
|
3. **Always shows**: List of all user's organizations
|
|
|
|
## Sidebar Behavior
|
|
|
|
The sidebar in the `(app)` layout dynamically changes based on the route:
|
|
|
|
- **Organization level** (`/$organizationId`): Shows projects list
|
|
- **Project level** (`/$organizationId/$projectId`): Shows dashboard navigation
|
|
|
|
## Adding New Routes
|
|
|
|
### For Auth Routes
|
|
Create new files with the pattern `src/routes/_auth.your-route.tsx`:
|
|
```typescript
|
|
import { createFileRoute } from '@tanstack/react-router';
|
|
|
|
export const Route = createFileRoute('/_auth/your-route')({
|
|
component: YourComponent,
|
|
});
|
|
```
|
|
|
|
### For App Routes
|
|
Create new files with the pattern `src/routes/_app.your-route.tsx`:
|
|
```typescript
|
|
import { createFileRoute } from '@tanstack/react-router';
|
|
|
|
export const Route = createFileRoute('/_app/your-route')({
|
|
component: YourComponent,
|
|
});
|
|
```
|
|
|
|
### For Onboarding Nested Routes
|
|
Create new files with the pattern `src/routes/_auth.onboarding.your-step.tsx`:
|
|
```typescript
|
|
import { createFileRoute } from '@tanstack/react-router';
|
|
|
|
export const Route = createFileRoute('/_auth/onboarding/your-step')({
|
|
component: YourComponent,
|
|
});
|
|
```
|
|
|
|
## Route Parameters
|
|
|
|
- `$organizationId`: Dynamic organization identifier
|
|
- `$projectId`: Dynamic project identifier
|
|
|
|
These parameters are automatically available in the route components via the `useParams()` hook.
|
|
|
|
## Example Usage
|
|
|
|
```typescript
|
|
import { useParams } from '@tanstack/react-router';
|
|
|
|
function ProjectDashboard() {
|
|
const { organizationId, projectId } = useParams({
|
|
from: '/_app/$organizationId/$projectId'
|
|
});
|
|
|
|
// Use organizationId and projectId
|
|
}
|
|
```
|
|
|
|
## File Structure
|
|
|
|
```
|
|
src/routes/
|
|
├── __root.tsx # Root layout
|
|
├── index.tsx # Landing page
|
|
├── _auth.tsx # Auth layout (pathless)
|
|
├── _auth.login.tsx # Login page
|
|
├── _auth.onboarding.tsx # Onboarding layout
|
|
├── _auth.onboarding.index.tsx # Onboarding main page
|
|
├── _auth.onboarding.step1.tsx # Onboarding step 1
|
|
├── _app.tsx # App layout (pathless)
|
|
├── _app.$organizationId.tsx # Organization projects list
|
|
└── _app.$organizationId.$projectId.tsx # Project dashboard
|
|
```
|