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