React router dom 不加载组件

Question

我必须构建一个网络应用程序，在其中提出问题，并根据您的回答，您将到达下一个地点 ID。

当我点击开始游戏时，我得到了第一个ID，这很完美。但是，当我单击可能的答案时，URL 中的 ort?id 会从 1 更改为 2，但新问题不会加载。只有当我手动重新启动网站时，新问题才会出现。

我对 JS 不太有经验，但这是我的 .jsx 文件，我认为它们对我的问题很重要。

非常感谢您的帮助。:)

应用程序.jsx

import React from "react";
import Startseite from "./components/Startseite";
import Spiel from "./components/Spiel";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Startseite />} />
        <Route path="/ort?id" element={<Spiel />} /> 
        <Route path="/ort" element={<Startseite />} /> 
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Spiel.jsx

import React, { useState, useEffect } from "react";
import { useLocation, Link } from "react-router-dom";
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

function Spiel() {
  const location = useLocation();
  const [ort, setOrt] = useState(null);
  const [umfrage, setUmfrage] = useState(null);
  const [antworten, setAntworten] = useState([]);

  useEffect(() => {
    console.log("useEffect wird ausgeführt mit location.key:", location.key);
    const ladeOrt = async () => {
      const searchParams = new URLSearchParams(location.search);
      const qrId = searchParams.get("id");
      if (qrId) {
        try {
          // State-Variablen zurücksetzen
          setOrt(null);
          setUmfrage(null);
          setAntworten([]);

          const response = await fetch(`/api/ort/${qrId}`);
          const data = await response.json();
          setOrt(data.ort);
          setUmfrage(data.umfragen[0]);
          setAntworten(data.antworten);
        } catch (error) {
          console.error("Fehler beim Laden der Daten:", error);
        }
      }
    };
    ladeOrt();
  }, [location.key]);

  return (
    <div>
      {ort && (
        <div>
          <h2>{ort.name}</h2>
          {umfrage && antworten.length > 0 && (
            <div>
              <p>{umfrage.frage}</p>
              <ul>
                {antworten.map((antwort) => (
                  <li key={antwort.id}>
                    <Link to={`/ort?id=${antwort.ziel_ort_id}`}>
                      {antwort.antwort}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          )}
          <MapContainer center={[53.1437, 8.2137]} zoom={13} scrollWheelZoom={false} style={{ height: "400px" }}>
            <TileLayer
              attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            {ort && (
              <Marker position={[ort.lat, ort.long]}>
                <Popup>
                  {ort.name}
                </Popup>
              </Marker>
            )}
          </MapContainer>
        </div>
      )}
    </div>
  );
}

export default Spiel;

我尝试用 Gemini 修复它，但他尝试修复 App.jsx，这只会让情况变得更糟，哈哈。

Answer 1

"/ort?id"

不是有效的路由路径值，无法匹配。路线路径应包含任何搜索参数。

您已经在

Startseite

上渲染

"/"

，因此假设您尝试使用一些

"/ort"

搜索字符串值导航到

id

并希望

Spiel

然后渲染，我建议如下：

• 删除

  path="/ort?id"

  路线。
• 在

  Spiel

  路线上渲染

  path="ort"

  。

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Startseite />} />
        <Route path="/ort" element={<Spiel />} /> 
      </Routes>
    </BrowserRouter>
  );
}

• 使用 useSearchParams

   中的 

  Spiel 挂钩读取当前

  id

  搜索字符串值。
• 使用

  qrId

  值作为

  useEffect

  钩子依赖，仅当

  id

  搜索参数值改变时才会触发效果。

import React, { useState, useEffect } from "react";
import { Link, useSearchParams } from "react-router-dom";
...

function Spiel() {
  const [searchParams] = useSearchParams();

  const [ort, setOrt] = useState(null);
  const [umfrage, setUmfrage] = useState(null);
  const [antworten, setAntworten] = useState([]);

  const qrId = searchParams.get("id");

  useEffect(() => {
    const ladeOrt = async () => {
      try {
        // State-Variablen zurücksetzen
        setOrt(null);
        setUmfrage(null);
        setAntworten([]);

        const response = await fetch(`/api/ort/${qrId}`);
        const data = await response.json();
        setOrt(data.ort);
        setUmfrage(data.umfragen[0]);
        setAntworten(data.antworten);
      } catch (error) {
        console.error("Fehler beim Laden der Daten:", error);
      }
    };

    if (qrId) {
      ladeOrt();
    }
  }, [qrId]);

  return (
    <div>
      {ort && (
        <div>
          <h2>{ort.name}</h2>
          {umfrage && antworten.length > 0 && (
            <div>
              <p>{umfrage.frage}</p>
              <ul>
                {antworten.map((antwort) => (
                  <li key={antwort.id}>
                    <Link to={`/ort?id=${antwort.ziel_ort_id}`}>
                      {antwort.antwort}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          )}
          ...
        </div>
      )}
    </div>
  );
}