⚛️ React Dynamic Routing with React Router (2025)

Want to show different pages based on URL in React? This blog teaches you how to build a mini blog app using dynamic routing in React using:

✅ React Router v6.22+

✅ Vite (fast React setup)

✅ :id parameter in routes

✅ useParams() to read from the URL

We’ll build:

• 🏠 A Home page showing blog post list
• 📄 A Blog Detail page using dynamic route /blog/:id

---

🛠 Step 1: Create React App using Vite

npm create vite@latest react-dynamic-routing -- --template react
cd react-dynamic-routing
npm install

▶️ This creates a React app with Vite (fast, modern way in 2025)

---

📦 Step 2: Install React Router

npm install react-router-dom

▶️ React Router allows us to create routes and navigation.

---

📁 Folder Structure

src/
├── App.jsx
├── main.jsx
├── data.js
└── pages/
    ├── Home.jsx
    └── BlogDetail.jsx

---

📚 Step 3: Add Blog Data (data.js)

// src/data.js
export const blogs = [
  { id: '1', title: '📘 React Basics', content: 'React is a JavaScript UI library.' },
  { id: '2', title: '💡 JSX Explained', content: 'JSX lets you write HTML in JS.' },
  { id: '3', title: '🧭 React Router', content: 'React Router helps in routing.' },
];

▶️ This is our dummy blog data.

---

🏠 Step 4: Home Page (Home.jsx)

// src/pages/Home.jsx
import React from 'react'
import { Link } from 'react-router-dom'
import { blogs } from '../data.js'

const Home = () => {
  return (
    <div>
      <h2>📰 All Blogs</h2>
      <ul>
        {blogs.map((blog) => (
          <li key={blog.id}>
            {/* Navigate to dynamic blog route */}
            <Link to={`/blog/${blog.id}`}>{blog.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default Home

▶️ This lists all blogs and links to /blog/:id

---

📄 Step 5: Blog Detail Page (BlogDetail.jsx)

// src/pages/BlogDetail.jsx
import React from 'react'
import { useParams } from 'react-router-dom'
import { blogs } from '../data.js'

const BlogDetail = () => {
  const { id } = useParams() // Get id from URL
  const blog = blogs.find((b) => b.id === id) // Find blog by id

  if (!blog) {
    return <h2>❌ Blog not found</h2>
  }

  return (
    <div>
      <h2>{blog.title}</h2>
      <p>{blog.content}</p>
    </div>
  )
}

export default BlogDetail

▶️ This page reads the blog id from the URL using useParams() and displays the matching blog.

---

🧭 Step 6: Define Routes (App.jsx)

// src/App.jsx
import React from 'react'
import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider
} from 'react-router-dom'

import Home from './pages/Home.jsx'
import BlogDetail from './pages/BlogDetail.jsx'

// Define routes using latest React Router method
const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route path="/" element={<Home />} />             {/* Home page */}
      <Route path="/blog/:id" element={<BlogDetail />} /> {/* Dynamic blog detail */}
    </>
  )
)

const App = () => {
  return <RouterProvider router={router} />
}

export default App

▶️ We use createBrowserRouter and RouterProvider → latest clean syntax for routes.

---

🔌 Step 7: Mount React App (main.jsx)

// src/main.jsx
import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css' // optional styling

createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

▶️ This runs the app inside the HTML root element.

---

🚀 Run the App

npm run dev

Then visit:

➡️ / → List of blog posts

➡️ /blog/1 → Blog post 1

➡️ /blog/2 → Blog post 2

➡️ and so on...

---

✅ What You Learned

✨ In this tutorial, you learned:

• How to set up React project with Vite
• How to install and use React Router v6.22+
• How to use dynamic routes like /blog/:id
• How to read URL parameters using useParams()

---

🧠 Extra Ideas to Try

✅ Add a 404 "Page Not Found"

✅ Add Tailwind CSS for styling

✅ Use an API instead of local data

✅ Add loading indicator

---

🥳 That’s It!

You now understand dynamic routing in React the clean and modern way!

Happy coding! 💻🎉