反应 axios URL 连接 returns 404 未找到

Question

我正在尝试根据来自 useParams 挂钩变量 id 的记录 ID 显示动态数据。但是当我连接 id 值时，它 returns not found 404 错误。虽然 id 值在我对其进行控制台时作为有效 ID 返回，但串联不起作用。

这是我的代码

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/pdfjs-dist@2.6.347/build/pdf.worker.min.js">
                <Viewer
                  fileUrl={datas?.file}
                  plugins={[defaultLayoutPluginInstance]}
                />
              </Worker>
            </>
          )}
        </div>
      );
    };
    
    export default Signature;

这是动态变化的 id 的值。

但是当我按如下方式传递 id 的值时，它工作正常。

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

但是当我连接 id 变量时 returns 404 not found 错误。

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

我这里有什么错误？

Answer 1

useParams React Router 的钩子 returns 一个带参数的对象。

你应该使用类似的东西：

const { id } = useParams();

如果您的参数被称为 id。

您可以在此处的文档中看到更多信息：https://v5.reactrouter.com/web/api/Hooks/useparams

反应 axios URL 连接 returns 404 未找到

react axios URL concatenation returns 404 not found

javascript

reactjs

react-router

concatenation