react-router-v7-patterns

React Router v7 (Remix) Best Practices

Overview

React Router v7 is the evolution of Remix, providing server-side rendering, data loading, and modern routing patterns. Follow these patterns for optimal performance and user experience.

Route Structure and Organization

✅ CORRECT Route Organization

// apps/frontend/src/routes/
├── _layout.tsx                    // Root layout
├── _auth.tsx                      // Auth layout
├── page/
│   ├── index/                     // Home page
│   │   ├── route.tsx             // Main route file
│   │   ├── featured-blogs.tsx    // Page components
│   │   └── hero.tsx
│   └── about/
│       └── route.tsx
├── api/
│   ├── auth/
│   │   └── login.tsx             // API routes
│   └── blog/
│       └── featured.tsx
└── ui/
    ├── blog/
    │   └── route.tsx             // UI routes
    └── profile/
        └── route.tsx

❌ WRONG Route Organization

// Don't mix concerns in single files
├── routes/
│   ├── everything-in-one-file.tsx  // Too much in one file
│   ├── random-structure/           // Inconsistent naming
│   └── no-clear-separation/        // Mixed API and UI routes

Data Loading Patterns

✅ CORRECT Loader Implementation

// route.tsx
import { LoaderFunctionArgs } from 'react-router'
import { BlogPostService } from '~/.server/services/BlogPostService'
import { E } from '~/lib/effect'

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const url = new URL(request.url)
  const page = Number(url.searchParams.get('page')) || 1
  
  // Use Effect-TS for data loading
  const featuredBlogPostsPromise = E.runPromise(
    BlogPostService.getFeaturedBlogPosts({ page, limit: 6 }).pipe(
      E.provide(BlogPostService.Default)
    )
  )
  
  return {
    featuredBlogPostsPromise,
    meta: {
      title: 'T6C - Motorcycle Community',
      description: 'Join the ultimate motorcycle building community'
    }
  }
}

// Component using the data
export default function HomePage() {
  const { featuredBlogPostsPromise } = useLoaderData<typeof loader>()
  
  return (
    <div>
      <Suspense fallback={<LoadingSkeleton />}>
        <Await 
          resolve={featuredBlogPostsPromise}
          errorElement={<ErrorComponent />}
        >
          {(data) => <FeaturedBlogs data={data} />}
        </Await>
      </Suspense>
    </div>
  )
}