🚀 React 19 + React Router v7: A Modern Approach to Building React Apps

With the release of React 19 and the latest evolution of React Router v7, the way we scaffold, structure, and scale React apps is changing — for the better.

In this article, I’ll walk you through:

• The new create-react-router installer
• How React Router v7 redefines routing
• What’s inside the new root.tsx
• Support for SSR, SSG, and React Server Components (RSC)
• How this approach compares with building React apps from scratch

Let’s dive in. 🔍

---

🛠️ Install with One Command

The modern way to start a React app is as simple as:

npx create-react-router@latest

This command sets up a full-stack-capable React app powered by:

• Vite as the lightning-fast build tool
• React Router v7 for routing
• Smart file-based routing with routes/ folder
• Built-in support for loaders, actions, and error boundaries
• SSR/SSG/RSC capabilities via plugin integration (like with Vite or Remix-style approaches)

🔔 Fun fact: React Router is now maintained by Shopify — and they’ve taken routing seriously with deep framework-level integration.

---

📂 Meet root.tsx: The New App.tsx

The traditional App.tsx has been replaced by root.tsx, which serves as the top-level layout for your app. This file:

• Acts as the shared layout across all pages
• Defines the global <Outlet /> for rendering nested routes
• Sets up scroll restoration, navigation UI, or even context providers
• Handles shared loaders or error boundaries

Example snippet from root.tsx:

import { Outlet, ScrollRestoration } from "react-router-dom";

export function Root() {
  return (
    <>
      <Navbar />
      <Outlet />
      <ScrollRestoration />
    </>
  );
}

It's a clean, modular way to separate global layout from page-level logic.

---

📁 File-based Routing and Nested Layouts

Routes are defined by file structure inside the /routes folder:

/routes
  ├─ index.tsx       → Home page
  ├─ about.tsx       → About page
  └─ blog/
      ├─ index.tsx   → Blog listing
      └─ $postId.tsx → Blog post (dynamic route)

Each route file can export:

• loader() for prefetching data before rendering
• action() for handling form submissions
• ErrorBoundary to handle per-page errors

🎯 With this setup, routing, data fetching, and page structure are colocated and intuitive.

---

🌐 SSR, SSG, and React Server Components

By default, apps created with create-react-router are SPAs. However, they are ready for:

• SSR (Server-Side Rendering): for dynamic, fast, SEO-friendly pages
• SSG (Static Site Generation): great for marketing or landing pages
• RSC (React Server Components): for mixing client/server logic within a single React tree

These strategies are per-route configurable. That means:

• Your landing page can use SSG
• Your dashboard can use SSR
• A content-heavy route can use RSC

React Router’s modern architecture makes this flexibility seamless — especially when integrated with Vite plugins or tools like Remix or Hydrogen.

---

🆚 Starting from Scratch?

Yes, you can start a React app from scratch with Vite, Parcel, or Rsbuild and plug in your own router, data-fetching library, SSR logic, etc. But be prepared for:

• More boilerplate
• Harder maintainability
• Missing out on framework-level optimizations (like prefetching, route bundling, error boundaries)

React’s own docs say it best:

"Starting from scratch is often the same as building your own ad hoc framework."

Unless you’re doing it to learn deeply — or for a very specific use case — I recommend starting with an opinionated setup like create-react-router.

---

✅ Summary

React 19 and React Router v7 are pushing the React ecosystem forward by:

• Simplifying full-stack app creation
• Offering a modern, modular layout (root.tsx)
• Supporting SSR/SSG/RSC out of the box
• Promoting colocated routing and data fetching
• Reducing waterfall loading and performance issues

If you haven't tried the new setup yet, now’s the time.

npx create-react-router@latest

💬 Let me know how you’re building with React 19. Are you starting from scratch or using these new framework-enhanced setups?

---

🧠 Follow me on LinkedIn for more insights.

Vite, React, SSR, RSC, Frontend