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

Question

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

Answer 1

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>
  );
};

Answer 2

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

I'm not finding a documentation using element prop. Try to use render prop instead or with component={JournalPage}.