React Router Dom组件不加载求助：URL变更后内容未更新

核心问题分析 #

1. 路由配置错误：App.jsx中路由路径写了/ort?id，react-router-dom的路由匹配不会识别路径里的查询参数，导致路由规则混乱。
2. useEffect依赖错误：Spiel.jsx中useEffect依赖location.key，但点击同路径（/ort）不同查询参数的链接时，location.key不会变化，因此useEffect不会重新执行，新数据无法加载。

修复步骤 #

1. 修正App.jsx的路由配置 #

将包含查询参数的路由规则移除，统一用/ort匹配Spiel组件：

修改后的App.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 />} />
        {/* 直接匹配/ort路径，无需包含查询参数 */}
        <Route path="/ort" element={<Spiel />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

2. 修正Spiel.jsx的useEffect依赖 #

将useEffect的依赖从location.key改为location.search，确保查询参数变化时重新加载数据：

修改后的Spiel.jsx关键部分：

useEffect(() => {
  console.log("useEffect wird ausgeführt mit location.search:", location.search);
  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.search]); // 这里改为location.search

修复原理 #

• 路由配置：react-router-dom的路径匹配只关注路径部分（/ort），查询参数（?id=xxx）不属于路径规则的一部分，因此不需要写在路由path里。
• useEffect依赖：location.search会随着查询参数的变化而改变，当用户点击答案链接时，?id变化导致location.search更新，触发useEffect重新执行，从而加载新的地点和问题数据。

内容的提问来源于stack exchange，提问作者FoiFoi13