Reactjs – Uncaught TypeError: Cannot read properties of undefined (reading 'params') – React Router Issue

PropertyDetails.jsx

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';
import '../styles/propertydetails.css';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';

function PropertyDetails() {
  const { id } = useParams();
  const [propertyData, setPropertyData] = useState(null);

  useEffect(() => {
    // Fetch property details for the given propertyId using Axios
    axios.get(`http://127.0.0.1:8000/api/v1/core/detail/${id}/`)
      .then((response) => {
        setPropertyData(response.data.results); 
      })
      .catch((error) => {
        console.error('Error fetching property details:', error);
      });
  }, [id]);

  if (!propertyData) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <Navbar />
      <div className="property-details-container">
        <img src={propertyData.main_photo} alt={propertyData.title} className="main-photo" />
        <h2>{propertyData.title}</h2>
        <p>{propertyData.description}</p>
        <p>Price: ${propertyData.price}</p>
        <p>Bedrooms: {propertyData.bedrooms}</p>
        
      </div>
      <Footer />
    </div>
  );
}

export default PropertyDetails;

App.js

import { Routes, Route } from "react-router-dom"
import HomePage from "../src/pages/HomePage"
import SalesPage from "../src/pages/SalesPage"
import RentalsPage from "../src/pages/RentalsPage"
import PropertyDetails from "../src/components/PropertyDetails"
import "./App.css"

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={ <HomePage/> } />
              <Route path="sales" element={<SalesPage />} />
              <Route path="rentals" element={<RentalsPage />} />
              <Route path="/property/:id" element={<PropertyDetails />} />
          </Routes>
    </div>
  )
}

export default App

I’ve verified that the id parameter is correctly extracted using useParams. However, I’m still encountering this error. Can someone please help me understand what might be causing this issue and how I can resolve it? Thank you!

I am fetching data from a django-rest api