I am using json-server to serve data from a JSON file for my React application. When I access http://localhost:3000/delivery_centers, it correctly returns all delivery centers. However, when I try to access an individual delivery center using http://localhost:3000/delivery_centers/1, I get a “Not Found” error.

{
  "delivery_centers": [
    {
      "id": 1,
      "name": "Central Hub",
      "location": {
        "address": "123 Main St, New York City, NY, USA",
        "capacity": 1000,
        "types_of_shipments": ["express", "standard", "fragile"]
      },
      "staff": [
        { "id": 10, "name": "John Doe", "role": "Driver" },
        { "id": 11, "name": "Jane Smith", "role": "Sorter" }
      ],
      "vehicles": [
        { "id": 20, "type": "Truck", "capacity": 50 },
        { "id": 21, "type": "Van", "capacity": 20 }
      ],
      "shipments": [
        {
          "id": 123,
          "origin_center": 1,
          "destination_center": 2,
          "sender": "Acme Corporation",
          "recipient": "XYZ Inc.",
          "type": "standard",
          "weight": 30,
          "dimensions": "10x15x20",
          "value": 1000,
          "status": "in_transit",
          "route": {
            "id": 456,
            "origin": "New York City",
            "destination": "Los Angeles",
            "distance": 2400,
            "vehicle": 20
          }
        }
      ]
    },
    {
      "id": 2,
      "name": "West Coast Hub",
      "location": {
        "address": "456 West St, Los Angeles, CA, USA",
        "capacity": 800,
        "types_of_shipments": ["standard", "fragile"]
      },
      "staff": [
        { "id": 12, "name": "Mike Johnson", "role": "Driver" },
        { "id": 13, "name": "Emily Brown", "role": "Sorter" }
      ],
      "vehicles": [
        { "id": 22, "type": "Truck", "capacity": 60 },
        { "id": 23, "type": "Van", "capacity": 25 }
      ],
      "shipments": [
        {
          "id": 124,
          "origin_center": 2,
          "destination_center": 3,
          "sender": "ABC Corp.",
          "recipient": "PQR Ltd.",
          "type": "fragile",
          "weight": 20,
          "dimensions": "8x10x15",
          "value": 1500,
          "status": "delivered",
          "route": {
            "id": 457,
            "origin": "Los Angeles",
            "destination": "San Francisco",
            "distance": 380,
            "vehicle": 22
          }
        }
      ]
    }
  ]
}



Sure, here's a detailed question you can post on Stack Overflow:

Title: Why is json-server not returning individual records for my endpoint?

Body:

I am using json-server to serve data from a JSON file for my React application. When I access http://localhost:3000/delivery_centers, it correctly returns all delivery centers. However, when I try to access an individual delivery center using http://localhost:3000/delivery_centers/1, I get a "Not Found" error.

My JSON file (Logistics.json):
json
Copy code
{
  "delivery_centers": [
    {
      "id": 1,
      "name": "Central Hub",
      "location": {
        "address": "123 Main St, New York City, NY, USA",
        "capacity": 1000,
        "types_of_shipments": ["express", "standard", "fragile"]
      },
      "staff": [
        { "id": 10, "name": "John Doe", "role": "Driver" },
        { "id": 11, "name": "Jane Smith", "role": "Sorter" }
      ],
      "vehicles": [
        { "id": 20, "type": "Truck", "capacity": 50 },
        { "id": 21, "type": "Van", "capacity": 20 }
      ],
      "shipments": [
        {
          "id": 123,
          "origin_center": 1,
          "destination_center": 2,
          "sender": "Acme Corporation",
          "recipient": "XYZ Inc.",
          "type": "standard",
          "weight": 30,
          "dimensions": "10x15x20",
          "value": 1000,
          "status": "in_transit",
          "route": {
            "id": 456,
            "origin": "New York City",
            "destination": "Los Angeles",
            "distance": 2400,
            "vehicle": 20
          }
        }
      ]
    },
    {
      "id": 2,
      "name": "West Coast Hub",
      "location": {
        "address": "456 West St, Los Angeles, CA, USA",
        "capacity": 800,
        "types_of_shipments": ["standard", "fragile"]
      },
      "staff": [
        { "id": 12, "name": "Mike Johnson", "role": "Driver" },
        { "id": 13, "name": "Emily Brown", "role": "Sorter" }
      ],
      "vehicles": [
        { "id": 22, "type": "Truck", "capacity": 60 },
        { "id": 23, "type": "Van", "capacity": 25 }
      ],
      "shipments": [
        {
          "id": 124,
          "origin_center": 2,
          "destination_center": 3,
          "sender": "ABC Corp.",
          "recipient": "PQR Ltd.",
          "type": "fragile",
          "weight": 20,
          "dimensions": "8x10x15",
          "value": 1500,
          "status": "delivered",
          "route": {
            "id": 457,
            "origin": "Los Angeles",
            "destination": "San Francisco",
            "distance": 380,
            "vehicle": 22
          }
        }
      ]
    }
  ]
}
My React Component (Live.js):
javascript
Copy code
import React from "react";
import { useParams } from "react-router-dom";
import useFetch from "../Fetch/Fetch";

const Live = () => {
    const { id } = useParams();
    const { value, error, loading } = useFetch(`http://localhost:3000/delivery_centers/${id}`);

    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error}</div>;

    const center = value;

    return (
        <div>
            <h1>{center ? center.name : "Delivery Center Not Found"}</h1>
            {center && (
                <>
                    <p>Address: {center.location.address}</p>
                    <p>Capacity: {center.location.capacity}</p>
                    <p>Types of Shipments: {center.location.types_of_shipments.join(', ')}</p>
                    <h2>Staff</h2>
                    <ul>
                        {center.staff.map(member => (
                            <li key={member.id}>{member.name} - {member.role}</li>
                        ))}
                    </ul>
                    <h2>Vehicles</h2>
                    <ul>
                        {center.vehicles.map(vehicle => (
                            <li key={vehicle.id}>{vehicle.type} - Capacity: {vehicle.capacity}</li>
                        ))}
                    </ul>
                </>
            )}
        </div>
    );
};


Issue:
When I access http://localhost:3000/delivery_centers, it returns both delivery centers as expected:

[
  { ... },  // Details of delivery center with ID 1
  { ... }   // Details of delivery center with ID 2
]

But when I try to access an individual center like http://localhost:3000/delivery_centers/1, I get a “Not Found” error.

Question:

How can I configure json-server to correctly return individual delivery centers by their ID when accessing endpoints like http://localhost:3000/delivery_centers/1?

What I’ve Tried:

1. Verified that the JSON server is running correctly.

2. Ensured the id field in each object is correct.

3. Checked the endpoint URL in the fetch request.