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

Question

我正在尝试从我的 django 后端访问特定数据，基于在 url 中为我的前端反应应用程序使用唯一 id。我希望看到期刊的正文

相反，我收到此错误：类型错误：无法读取未定义的属性（读取 'params'）

我尝试使用 'useParams'，但它会导致更多错误。我也在 SO 上发现了类似的问题，但他们提到使用 'props'，这是我应该尝试的方法吗？

编辑：here 是我使用元素而不是组件的一个例子。

我的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;

我的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

提前致谢

Answer 1

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

我没有找到使用 element prop 的文档。尝试使用 render 道具或 component={JournalPage}.

Answer 2

在 react-router-dom v6 中不再有任何路由道具，所以你必须使用 React hooks 来访问这些值。要访问匹配参数，您可以使用 useMatch 或 useParams 挂钩。

useParams

对于给定的路由：<Route path="/journals/:id" element={<JournalPage/>} /> 要访问 id 匹配参数，请使用 JournalPage 中的 useParams 挂钩。

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

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

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

reactjs

django

django-rest-framework

react-router-dom

dynamic-url