Estoy tratando de acceder a datos específicos de mi backend de django en función del uso de la identificación única en la url para mi aplicación de reacción en la interfaz. Espero ver el cuerpo del diario.
En su lugar, aparece este error: TypeError: no se pueden leer las propiedades de undefined (leyendo 'parámetros')
Traté de usar, 'useParams' en su lugar, pero condujo a más errores. También encontré preguntas similares en SO, pero mencionaron el uso de 'accesorios', ¿es este el método que debería intentar en su lugar?
editar: aquí hay un ejemplo de por qué estoy usando elemento en lugar de componente.
mi aplicación.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;mi 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 JournalPageGracias por adelantado
En react-router-dom v6 ya no hay accesorios de ruta, por lo que debe usar los ganchos React para acceder a estos valores. Para acceder a los parámetros de coincidencia, puede usar los ganchos useMatch o useParams .
Para la ruta dada: <Route path="/journals/:id" element={<JournalPage/>} /> para acceder al parámetro de coincidencia de id , use el useParams en 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> No estoy encontrando una documentación usando element prop. Intente usar render prop en su lugar o con component={JournalPage} .