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( );

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 ( <> ); } export default App;

5. Creating Navigation

In components/Navigation.jsx, add navigation links:

import { NavLink } from "react-router-dom"; function Navigation() { return (

); } export default Navigation;

6. Building Pages

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

function HomePage() { return

Welcome to the Home Page!

; } 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

Product Details for ID: {id}

; } 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 (

Dashboard

); } export default DashboardLayout;

9. Handling 404s

In NotFoundPage.jsx:

function NotFoundPage() { return

404 - Page Not Found

; } export default NotFoundPage;

10. Running the App

Start your development server:

npm run dev

Visit

http://localhost:5173

to see your app in action!

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!

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe