React Router Not Rendering Dynamic Route Correctly For IndividualCard Component

Dynamic route configuration:

1. Router Setup

BrowserRouter (aliased as Router): Wraps the entire application to enable React Router for navigation.
Routes and Route: Define the route structure. The path prop in the Route component includes a dynamic segment :cardName, which captures any value in that part of the URL.

2. Extracting and Using the Dynamic Parameter:

useParams(): Extracts the cardName parameter from the URL.

Example:

Dynamic routing in this code allows the IndividualCard component to render based on the URL parameter cardName. By using the :cardName parameter in the route path and extracting it with useParams, the app can dynamically display content for different tarot cards. This implementation currently supports the tarot cards “the-magician” and “the-fool”, which can be accessed via /introduction/the-magician and /introduction/the-fool URLs, respectively.

App.js

import "./styles.css";
import { BrowserRouter as Router, Route, Routes } 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>
 );
}

IndividualCard.js

import React from "react";
import { useParams } from "react-router-dom";

export default function IndividualCard() {
  const { cardName } = useParams();

  // Placeholder data for each Tarot card
  const tarotCardData = {
    "the-fool": {
      image: "/tarot-placeholder.jpg",
      title: "The Fool",
      description: "Placeholder description for The Fool tarot card...",
      keywords: "The Fool's Keywords"
    },
    "the-magician": {
      image: "/tarot-placeholder.jpg",
      title: "The Magician",
      description: "Placeholder description for The Magician tarot card...",
      keywords: "The Magician's Keywords"
    }
    // Add more cards as needed
  };
  const cardData = tarotCardData[cardName];
  const {
    description,
    title
  } = cardData;

  return (
    

      
 {title} 
      
 {description} 
    
  );
}