TypeError: Cannot read properties of undefined (reading 'params') when using match.params.id to fetch json data React Django rest API

Я пытаюсь получить доступ к определенным данным из моего django backend на основе использования уникального id в url для моего react app на frontend. Я ожидаю увидеть тело журнала

Вместо этого я получаю эту ошибку: TypeError: Cannot read properties of undefined (reading 'params')

>

Я пытался использовать 'useParams' вместо этого, но это привело к большему количеству ошибок. Я также нашел похожие вопросы на SO, но там упоминалось использование 'props', это тот метод, который я должен использовать вместо этого?

my App.js

import {
  BrowserRouter, Routes,
  Route, Router,
} from "react-router-dom";
import './App.css';
import Header from './components/Header'
import JournalDashboard from './pages/JournalDashboard'
import JournalPage from './pages/JournalPage'

function App() {
  return (
      <div className="App">
        <BrowserRouter>
          <Header /> 
          <Routes>
              <Route path="/" exact element={<JournalDashboard/>}></Route> 
              <Route path="/journals/:id" element={<JournalPage/>} ></Route> 
          </Routes>
        </BrowserRouter>
      </div>

  );
}

export default App;

my JournalPage.js

import React, { useState, useEffect } from 'react'

 
const JournalPage = ({ match }) => {


    let  journalId  = match.params.id
    let [journal, setJournal] = useState(null)

    useEffect(() => {
        getJournal()
    }, [journalId])

    let getJournal = async () => {
        let response = await fetch(`/api/journals/${journalId}/`)
        let data = await response.json()
        setJournal(data)
    }

    return (
      <div>
        <p>{journal?.body}</p>
      </div>
    )
}

export default JournalPage

Заранее спасибо

<Route path="/journals/:id" element={<JournalPage/>} ></Route>

Я не нахожу документации по использованию element prop. Попробуйте использовать render prop вместо него или с component={JournalPage}.

В версии 6 больше нет реквизитов маршрута, поэтому для доступа к этим значениям вы react-router-dom должны использовать хуки React. Для доступа к параметрам соответствия вы можете использовать или useMatch хуки.useParams

useParams

Для данного маршрута: <Route path="/journals/:id" element={<JournalPage/>} /> для доступа к параметру соответствия id используйте крючок useParams в JournalPage.

import { useParams } from 'react-router-dom';

const JournalPage = () => {
  const { id } = useParams(); // <-- access id match param here
  const [journal, setJournal] = useState(null);

  useEffect(() => {
    const getJournal = async () => {
      const response = await fetch(`/api/journals/${id}/`); // <-- passed to API URL
      const data = await response.json();
      setJournal(data);
    }

    getJournal();
  }, [id]); // <-- used as dependency

  return (
    <div>
      <p>{journal?.body}</p>
    </div>
  );
};
Вернуться на верх