Weekly Code Quickies

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

Listen Later

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 (

Home
About
Contact
Products
Dashboard
);
}
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
Home
Profile
Settings
);
}
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
...more
View all episodesView all episodes
Download on the App Store
Weekly Code QuickiesBy Norbert B.M.