Problem Overview

You have a dynamic route (e.g., /introduction/:cardName) meant to render an IndividualCard component based on the URL parameter, but it’s not displaying as expected.
Common symptoms:

  • The URL updates, but the component doesn’t render.
  • Only certain routes work, or nothing renders at all.

Step-by-Step Solution

Set up dynamic routes in React Router v6+ to display content based on URL parameters perfect for profile pages, product views, or custom cards.

1. Correct Route Setup in App

jsx

import { BrowserRouter as Router, Routes, Route } from “react-router-dom”;import IndividualCard from “./IndividualCard”;

import Home from “./Home”;

 

export default function App() {

  return (

    <Router>

      <Routes>

        <Route path=”/” element={<Home />} />

        <Route path=”/introduction/:cardName” element={<IndividualCard />} />

      </Routes>

    </Router>

  );

}

Use element={<Component />} for each route (React Router v6+).

Also Read: How ReactJS’s Strong Community Support Empowers Developers Worldwide?

2. Accessing the Dynamic Parameter

import { useParams } from “react-router-dom”;

export default function IndividualCard() {

  const { cardName } = useParams();

  // Use cardName to fetch or display the correct content

  return <div>Card: {cardName}</div>;

}

useParams() gives you the value from the URL.

3. Deployment Note: Static Hosting

If deployed to a static host (like Render, Netlify, Vercel), you must configure a rewrite rule so that all routes serve index.html and let React Router handle routing client-side.