Masalah dengan cangkuk (useParams)

Hai. Menghadapi masalah dengan kod saya, atas sebab tertentu cangkuk tidak akan memberikan data kepada pembolehubah saya walaupun url dimuatkan dengan sempurna.

Saya akan meletakkan coretan kod saya yang mempengaruhi perkara ini serta api yang berfungsi dengan sempurna.

API (CONTOH):
http://127.0.0.1:8000/api/inventory/item/raw_material/1/

APP.js

 <div className="App-container_map">
          {selectedProduct ? (
            <Routes>
              {/* Define the routes for each category */}
              <Route 
                path="/raw_material" <------
                element={<RawMaterial onReset={handleResetProduct} />} 
              />
              <Route 
                path="/consumibles" <------
                element={<Consumibles onReset={handleResetProduct} />} 
              />
              {/* Add more routes for other categories as needed */}
            </Routes>
          ) : (
            <div>
              <Link to={'/Inventory'}>
                <button>Inventory</button>
              </Link>
              <Link to="/">
                <button>Some Other Subject</button>
              </Link>
            </div>
          )}
        </div>

Bahan Mentah.JS

const RawMaterial = ({ onReset }) => {
  const { category, id } = useParams()
  const [ productDetails, setProductDetails ] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchDetailedItem = async () => {
      try {
        const details = await fetchSpecificDetailedItem(category, id);
        setProductDetails(details);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

API.js

export const fetchSpecificDetailedItem = async (category, id) => {
  if (!category || !id) {
    console.error('Error: Category or ID is not defined', { category, id });
    throw new Error('Category or ID is not defined');
  }
  try {
    const url = `${BASE_URL}/item/${category.toLowerCase()}/${id}/`;
    console.log('Requesting URL:', url);
    const response = await axios.get(url);
    return response.data;
  } catch (error) {
    console.error('Error fetching specific item details:', error);
    throw error;
  }
};

Jika maklumat lanjut diperlukan, saya akan memberikannya.
Apabila saya membuat console.log untuk url, url yang sama muncul, itulah sebabnya masalahnya mesti ada di sini, saya tidak tahu.

Selain itu, saya tidak menggunakan "/raw_material/id/" untuk laluan kerana apabila saya menggunakan fungsi klik saya, tiada apa yang berlaku; bertindak balas seolah-olah tidak melihat sebarang laluan di sana.

Atas ialah kandungan terperinci Masalah dengan cangkuk (useParams). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!