TypeError：使用异步/等待语法获取数据时无法读取未定义的属性（读取“参数”）

Question

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

相反，我得到了这个错误： TypeError: Cannot read properties of undefined (reading 'params')

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

编辑：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

在react-router-dom v6 中不再有任何路由道具，因此您必须使用 React 挂钩来访问这些值。要访问匹配参数，您可以使用 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>
  );
};

Answer 2

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

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