Mastering React Router v7 with TailwindCSS & Vite – Complete Crash Course

In this guide, we’ll walk step-by-step through creating a fully functional React app using React Router v7, styled with TailwindCSS, and powered by Vite. This is your go-to tutorial for learning client-side routing in React — from setup to nested routes and 404 pages.

---

📦 Technologies Used

• React 19 (via Vite)

• React Router v7.6.3

• TailwindCSS 4.1+

• Vite (for fast build + dev server)

---

🛠️ Project Setup with Vite & TailwindCSS

React Router Crash Course: Step-by-Step Guide

React Router is the standard routing library for React. In this crash course, we’ll build a simple multi-page app using React Router v6+ and Vite. Let’s get started!

---

1. Project Setup

First, create a new React project using Vite:

npm create vite@latest react-router-crash-course -- --template react
cd react-router-crash-course
npm install

Install React Router:

npm install react-router-dom

---

2. Project Structure

Organize your files as follows:

src/
  App.jsx
  main.jsx
  components/
    Button.jsx
    Navigation.jsx
  pages/
    HomePage.jsx
    AboutPage.jsx
    ContactPage.jsx
    ProductsPage.jsx
    ProductDetailPage.jsx
    NotFoundPage.jsx
    Dashboard/
      DashboardLayout.jsx
      DashboardHome.jsx
      DashboardProfile.jsx
      DashboardSettings.jsx

---

3. Setting Up the Router

In main.jsx, wrap your app with BrowserRouter:

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App.jsx";
import "./App.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

---

4. Defining Routes

In App.jsx, set up your routes:

import { Routes, Route } from "react-router-dom";
import Navigation from "./components/Navigation";
import HomePage from "./pages/HomePage";
import AboutPage from "./pages/AboutPage";
import ContactPage from "./pages/ContactPage";
import ProductsPage from "./pages/ProductsPage";
import ProductDetailPage from "./pages/ProductDetailPage";
import NotFoundPage from "./pages/NotFoundPage";
import DashboardLayout from "./pages/Dashboard/DashboardLayout";
import DashboardHome from "./pages/Dashboard/DashboardHome";
import DashboardProfile from "./pages/Dashboard/DashboardProfile";
import DashboardSettings from "./pages/Dashboard/DashboardSettings";

function App() {
  return (
    <>
      <Navigation />
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="about" element={<AboutPage />} />
        <Route path="contact" element={<ContactPage />} />
        <Route path="products" element={<ProductsPage />} />
        <Route path="products/:id" element={<ProductDetailPage />} />
        <Route path="dashboard" element={<DashboardLayout />}>
          <Route index element={<DashboardHome />} />
          <Route path="profile" element={<DashboardProfile />} />
          <Route path="settings" element={<DashboardSettings />} />
        </Route>
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </>
  );
}

export default App;

---

5. Creating Navigation

In components/Navigation.jsx, add navigation links:

import { NavLink } from "react-router-dom";

function Navigation() {
  return (
    <nav>
      <NavLink to="/">Home</NavLink>
      <NavLink to="/about">About</NavLink>
      <NavLink to="/contact">Contact</NavLink>
      <NavLink to="/products">Products</NavLink>
      <NavLink to="/dashboard">Dashboard</NavLink>
    </nav>
  );
}

export default Navigation;

---

6. Building Pages

Create simple components for each page in the pages/ directory. Example for HomePage.jsx:

function HomePage() {
  return <h1>Welcome to the Home Page!</h1>;
}

export default HomePage;

Repeat for AboutPage.jsx, ContactPage.jsx, etc.

---

7. Dynamic Routes

In ProductDetailPage.jsx, use the useParams hook to get the product ID:

import { useParams } from "react-router-dom";

function ProductDetailPage() {
  const { id } = useParams();
  return <h2>Product Details for ID: {id}</h2>;
}

export default ProductDetailPage;

---

8. Nested Routes (Dashboard Example)

In DashboardLayout.jsx, use the Outlet component:

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

function DashboardLayout() {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <NavLink to="">Home</NavLink>
        <NavLink to="profile">Profile</NavLink>
        <NavLink to="settings">Settings</NavLink>
      </nav>
      <Outlet />
    </div>
  );
}

export default DashboardLayout;

---

9. Handling 404s

In NotFoundPage.jsx:

function NotFoundPage() {
  return <h1>404 - Page Not Found</h1>;
}

export default NotFoundPage;

---

10. Running the App

Start your development server:

npm run dev

Visit

http://localhost:5173

to see your app in action!

Reactrouter

179KB ∙ PDF file

Download

Download

---

Conclusion

You now have a working React app with multiple pages, nested routes, dynamic routes, and a 404 page—all powered by React Router. Experiment by adding more pages or features!

---