Weekly Code Quickies

Become a full stack web developer by learn HTML, CSS, JavaScript, TypeScript, React JS, Next.js , Tailwind CSS, Bootstrap, Git &GitHub, and more... Join me now in this awesome adventure!

Author: Norbert B.M.

Weekly Code Quickies is a podcast designed for programmers and developers of all skill levels. Each episode is a bite-sized, quick-hit of valuable information and tips on a specific programming languages, back to front-end frameworks, best tools, emerging technologies, and best practices for working remotely. The podcast is perfect for those who are short on time but still want to stay up-to-date with the latest developments in the industry, including the latest tech news, new technologies, and gaming industry updates. norbertbmwebdev.substack.com
Be a guest on this podcast

Language: en

Genres: News, Tech News

Contact email: Get it

Feed URL: Get it

iTunes ID: Get it

Get all podcast data

Listen Now...

Mastering React Router v7 with TailwindCSS & Vite – Complete Crash Course
Tuesday, 8 July, 2025

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 & TailwindCSSReact Router Crash Course: Step-by-Step GuideReact 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 SetupFirst, 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 StructureOrganize 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 RouterIn 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 RoutesIn 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 NavigationIn 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 PagesCreate 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 RoutesIn 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 404sIn NotFoundPage.jsx:function NotFoundPage() { return 404 - Page Not Found; } export default NotFoundPage; 10. Running the AppStart your development server:npm run dev Visit http://localhost:5173 to see your app in action!ConclusionYou 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