⚛️ React Dynamic Routing with React Router (2025)

This content originally appeared on DEV Community and was authored by Himanay Khajuria

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