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

score 2 · Accepted Answer · answered Nov 28 '21 at 23:42

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

score 0 · Answer 2 · answered Nov 26 '21 at 17:07

0

<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}.

answered Nov 26 '21 at 17:07

Antonin Riche

548
6
10

https://reactrouter.com/docs/en/v6/getting-started/overview this shows an example of using element. I did take your advice and changed that line to component, I no longer get the inital error but now the page loads but still does not show the data and i get this message in the browser console: Matched leaf route at location "/journals/2" does not have an element. This means it will render an with a null value by default resulting in an "empty" page. Do you have an idea what i could do? @AntoninRiche – fulo Nov 26 '21 at 17:49

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

2 Answers2