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

This content originally appeared on DEV Community and was authored by Seyed Ahmad

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