In this tutorial, we will set up React Router 7 in a modern React 19 application. You will learn how routing works, how to configure routes, and how to structure your project cleanly using best practices.

What We Will Learn

• What React Router 7 is and why it is used
• Installing React Router 7
• Creating a basic router configuration
• Defining routes and pages
• Navigating between pages
• Recommended folder structure

What Is React Router 7

React Router is the standard routing library for React applications. It allows you to map URLs to components, creating a multi page experience while staying inside a single page application.

React Router 7 focuses on:

• Data aware routing
• Declarative route definitions
• Improved performance and structure

Installing React Router 7

From your project root, install React Router.

npm install react-router

React Router 7 is published under the react-router package name.

Basic Project Structure

A clean structure helps routing stay predictable.

/src
  /app
    app.tsx
  /pages
    home.tsx
    about.tsx
  main.tsx

Each file in pages represents a route.

Setting Up the Router

main.tsx

This is where the router is created and connected to React.

// src/main.tsx
import { createRoot } from "react-dom/client";
import { RouterProvider } from "react-router";
import { router } from "./app/app";
 
createRoot(document.getElementById("root")!).render(
  <RouterProvider router={router} />
);

Creating the Router Configuration

app/app.tsx

// src/app/app.tsx
import { createBrowserRouter } from "react-router";
import Home from "../pages/home";
import About from "../pages/about";
 
export const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/about",
    element: <About />,
  },
]);

This defines which component renders for each URL.

Creating Pages

Home Page

// src/pages/home.tsx
export default function Home() {
  return (
    <>
      <title>Home</title>
      <meta name="description" content="Home page" />
 
      <h1>Home</h1>
      <p>Welcome to the home page.</p>
    </>
  );
}

About Page

// src/pages/about.tsx
export default function About() {
  return (
    <>
      <title>About</title>
      <meta name="description" content="About page" />
 
      <h1>About</h1>
      <p>This is the about page.</p>
    </>
  );
}

Metadata is placed directly inside JSX as recommended for React 19.

Navigating Between Pages

Use the Link component for navigation.

// src/pages/home.tsx
import { Link } from "react-router";
 
export default function Home() {
  return (
    <>
      <title>Home</title>
 
      <h1>Home</h1>
      <Link to="/about">Go to About</Link>
    </>
  );
}

React Router handles navigation without full page reloads.

Using a Layout Route

Layouts allow shared UI across multiple pages.

// src/app/layout.tsx
import { Outlet, Link } from "react-router";
 
export default function Layout() {
  return (
    <>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
 
      <Outlet />
    </>
  );
}

Update the router to use the layout.

// src/app/app.tsx
import { createBrowserRouter } from "react-router";
import Layout from "./layout";
import Home from "../pages/home";
import About from "../pages/about";
 
export const router = createBrowserRouter([
  {
    element: <Layout />,
    children: [
      { path: "/", element: <Home /> },
      { path: "/about", element: <About /> },
    ],
  },
]);

Recommended Folder Structure

/src
  /app
    app.tsx
    layout.tsx
  /pages
    home.tsx
    about.tsx
  main.tsx

This structure scales well as routes grow.

Best Practices

• Keep routes declarative and simple
• Use layout routes for shared UI
• One page component per route
• Avoid deeply nested route trees early
• Let React Router handle navigation state

Conclusion

React Router 7 provides a clean and powerful way to manage navigation in React applications. By separating routes, pages, and layouts, you keep your app easy to understand and easy to scale.

Once routing is set up correctly, adding new pages becomes effortless.