React Router导航栏点击URL更新但组件不渲染，随机数据重置问题

问题分析 #

1. 导航后组件不渲染：你的代码中同时存在两个 Router 实例（App 里的 RouterProvider 和 NavBar 里的 BrowserRouter），导致路由上下文隔离。点击 Link 时只有内层 Router 感知到变化，外层的路由容器无法触发组件切换，必须刷新页面才能让外层 Router 识别 URL。
2. 数据重置：randomObject 是在 MainPage 组件内通过 useRandomObject 获取的，每次切换路由回到主页时，MainPage 会重新挂载，hook 会再次执行，导致数据重新加载。

解决方案 #

1. 修复导航不渲染问题 #

移除 NavBar 中的 BrowserRouter，整个应用只需要一个路由上下文（由 App 中的 RouterProvider 提供）：

// NavBar.js
import { Link } from "react-router-dom";

function NavBar() {
  return (
    <nav className="nav">
      <Link to="/">HOME</Link>
      <ul>
        <li>
          <Link to="/history">History</Link>
        </li>
      </ul>
    </nav>
  );
}

export default NavBar;

2. 解决数据重置问题 #

将数据获取逻辑提升到不会卸载的父组件中，通过路由上下文传递给子页面，确保数据在路由切换时保持不变：

修改 App.js，创建共享布局并提升数据获取逻辑

// App.js
import NavBar from "./components/NavBar";
import HistoryPage from "./pages/HistoryPage";
import MainPage from "./pages/MainPage";
import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
import useRandomObject from "./components/firebaseUtiility";

// 根布局组件：路由切换时不会卸载，用于共享导航和全局数据
const RootLayout = () => {
  // 在这里获取数据，只会执行一次
  const { randomObject } = useRandomObject();
  
  return (
    <>
      <NavBar />
      {/* 通过 Outlet 上下文传递数据给子路由 */}
      <Outlet context={{ randomObject }} />
    </>
  );
};

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      { path: "/", element: <MainPage /> },
      { path: "/history", element: <HistoryPage /> },
    ],
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

修改 MainPage，通过上下文接收数据

// MainPage.js
import React, { useState } from "react";
import Description from "../components/Description";
import ImageCarousel from "../components/ImageCarousel";
import GuessInput from "../components/GuessInput";
import { useOutletContext } from "react-router-dom";
import { useGetLocationsList, useGetLocationFromSearch } from "../components/firebaseUtiility";
import SearchBar from "../components/SearchBar";
import Hint from "../components/Hint";

function MainPage() {
  // 从路由上下文获取共享的 randomObject
  const { randomObject } = useOutletContext();
  const [selectedLocation, setSelectedLocation] = useState("");
  const { fullLocationList } = useGetLocationsList();
  const { randomFromLocation } = useGetLocationFromSearch(selectedLocation);

  function handleLocationSelect(location) {
    setSelectedLocation(location);
  }

  return (
    <>
      <div>
        <Description />
        <ImageCarousel object={randomFromLocation || randomObject} />
        <GuessInput object={randomFromLocation || randomObject} />
        <Hint object={randomFromLocation || randomObject} />
        <SearchBar
          placeholder="Search location..."
          locationsFromDatabase={fullLocationList}
          onLocationSelect={handleLocationSelect}
        />
      </div>
    </>
  );
}

export default MainPage;

核心原理 #

• 单一路由上下文：确保所有路由相关组件共享同一个 Router 实例，点击 Link 时能正确触发路由切换和组件渲染。
• 数据提升：将需要持久化的数据放在路由切换时不会卸载的父组件中，通过上下文传递给子页面，避免重复请求和数据重置。

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