reactjsdjangodjango-rest-frameworkreact-router-domdynamic-url

TypeError: Cannot read properties of undefined (reading 'params') when fetching Data using async / await syntax


I am trying to access specific data from my django backend based on using the unique id in the url for my react app on the frontend. I expect to see the body of the journal

Instead i get this error: TypeError: Cannot read properties of undefined (reading 'params')

I tried to use, 'useParams' instead but it lead to more errors. I also found similar questions on SO but they mentioned using 'props', is this the method i should be attempting instead?

edit: here is an example of why i am using element instead of component.

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

Thanks in advance


Solution

  • In react-router-dom v6 there are no longer any route props, so you must use the React hooks to access these values. To access the match params you can use the useMatch or useParams hooks.

    useParams

    For the given route: <Route path="/journals/:id" element={<JournalPage/>} /> to access the id match param, use the useParams hook in 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>
      );
    };