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.
