http://localhost:3000/getalldata/undefined 404 (Not Found)

again am getting an error while fetching data from backend to frontend , don't know where am wrong please try to fix my error, if you have any query please free feel to ask.

Note :: My adddata Opeartion is working fine

Userdata.js

This is my react js part where i want to fetch data from backend , and am using axios to fetch data

import React, { useEffect, useState } from "react";
import { Link,useParams } from "react-router-dom";
import Axios from 'axios';

const UserData = () => {
  const [users, setUser] = useState([{
    title : "",
    description : ""
  }]);
  
  const {id} = useParams();

  useEffect(() => {
    AllUsers();
  }, []);

  const AllUsers = async (id) => {
    const res = await Axios.get(`http://localhost:3000/getalldata/${id}`);
    console.log(res.data);
    setUser(res.data)
  };

  return (
    <div>
      <div className="container">
        <table className="table table-hover table-bordered mt-5">
          <thead>
            <tr>
              {/* <th scope="col">No</th> */}
              <th scope="col">Title</th>
              <th scope="col">Details</th>
              <th scope="col">Action</th>
            </tr>
          </thead>
          <tbody>
            {users.map((user, index) => (
              <tr key={index}>
                <th scope="row">{user.id}</th>
                <td>{user.title}</td>
                <td>{user.description}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default UserData;

Userdata/Route

This is my route file

const express = require("express");
const route = express.Router();

const {
  getallData,
  addData,
  getDataById,
  deleteData,
  editData,
} = require('../controller/userdata');

route.get("/getalldata", getallData);
route.post("/adddata", addData);
route.get("/:id", getDataById);
route.delete("/:id", deleteData);
route.put("/editData/:id", editData);

module.exports = route;

App.js

I have added App.js file which is link to each other.

import "./App.css";
import Home from "./components/Home";
import Login from "./components/Login";
import Navbar from "./components/Navbar";
import Register from "./components/Register";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import UserData from "./components/UserData";
import AddData from "./components/AddData";

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <div className="App">
        <Routes>
          <Route exact path="/" element={<Home />} />
          <Route exact path="/signup" element={<Register />} />
          <Route exact path="/signin" element={<Login />} />
          <Route exact path="/getalldata" element={<UserData />} />
          <Route exact path="/adddata" element={<AddData/>} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;