react axios URL concatenation returns 404 not found

Question

I am trying to display dynamic data based on record id coming from useParams hook variable id. But when I concatenated the id value, it returns not found 404 error. Although the id value is returned as valid id when I console it, the concatenation doesn't work.

Here is my code

import React, { useEffect, useRef, useState } from "react";
import SignaturePad from "react-signature-canvas";
import offer from "./assets/offer.PNG";
import { Document, Page } from "react-pdf";
// Import the main component
import { Viewer } from "@react-pdf-viewer/core"; // install this library
// Plugins
import { defaultLayoutPlugin } from "@react-pdf-viewer/default-layout"; // install this library
// Import the styles
import "@react-pdf-viewer/core/lib/styles/index.css";
import "@react-pdf-viewer/default-layout/lib/styles/index.css";
// Worker
import { Worker } from "@react-pdf-viewer/core"; // install this library

    import axios from "axios";
    import { useParams } from "react-router-dom";
    const Signature = (props) => {
      const id = useParams();
      const [numPages, setNumPages] = useState(null);
      const baseURL = "http://127.0.0.1:8000/rent/" + id;
      const [datas, setData] = useState([]);
    
      useEffect(() => {
        axios
          .get(baseURL)
          .then((response) => {
            setData(response.data);
          })
          .then(
            (response) => {},
            (err) => {
              console.log("No Data To Show");
            }
          )
          .catch((err) => {
            return false;
          });
      }, []);
      // Create new plugin instance
      const defaultLayoutPluginInstance = defaultLayoutPlugin();
      console.log(docId);
      return (
        <div className="p-10 flex flex-col space-y-24 font-serif justify-center items-center">
          <img src={imgg} />
    
          {datas?.file && (
            <>
              <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">
                <Viewer
                  fileUrl={datas?.file}
                  plugins={[defaultLayoutPluginInstance]}
                />
              </Worker>
            </>
          )}
        </div>
      );
    };
    
    export default Signature;

Here is the value of id which is dynamically changing.

But when I pass the value of id as follows it works fine.

const baseURL =
    "http://127.0.0.1:8000/rent/ce779e1d-3afb-4aa7-82e8-5bf74c4af0a7";

But when I concatenate the id variable it returns 404 not found error.

const baseURL =
    "http://127.0.0.1:8000/rent/"+id;

What's my mistake here?

Answer 1

useParams hook of React Router returns an object with params.

You should to use something like that:

const { id } = useParams();

in the case if your params is called id.

More you can see here, in the documentation: https://v5.reactrouter.com/web/api/Hooks/useparams