使用Browser Router时状态/上下文值被重置的问题求助

核心问题 #

使用BrowserRouter时，点击导航链接会触发整页刷新，导致Context状态被重置为默认值；切换到HashRouter可正常运行，但带来额外复杂度。同时，当前状态仅通过点击事件设置，无法与路由路径同步，直接访问分类URL时状态会异常。

修复步骤 #

1. 调整Provider与Router的层级 #

原代码中SelectedCategoryProvider包裹了BrowserRouter，导致Provider无法访问路由上下文，且路由跳转触发的页面刷新会重置整个Provider状态。需将Provider移至Router内部：

// App.tsx
import "./App.scss";
import Header from "./components/Header";
import { Routes, Route, BrowserRouter } from "react-router-dom";
import Homepage from "./pages/Homepage";
import Category from "./pages/Category";
import SelectedCategoryProvider from "./components/SelectedCategoryContext";

const App = () => {
    return (
        <BrowserRouter>
            <SelectedCategoryProvider>
                <Header />
                <Routes>
                    <Route path="/" element={<Homepage />} />
                    <Route path="/category/:categoryName" element={<Category />} />
                </Routes>
            </SelectedCategoryProvider>
        </BrowserRouter>
    );
};

export default App;

2. 让Context状态与路由自动同步 #

修改Context文件，通过useLocation监听路由变化，自动更新选中分类，确保状态与路由路径完全同步：

// SelectedCategoryContext.tsx
import { createContext, useState, useEffect } from "react";
import { useLocation } from "react-router-dom";

export const SelectedCategoryContext = createContext({
    selectedCategory: "home",
    setSelectedCategory: (categoryName: string) => {}
});

const SelectedCategoryProvider = ({children}: { children: React.ReactNode }) => {
    const [selectedCategory, setSelectedCategory] = useState("home");
    const location = useLocation();

    useEffect(() => {
        // 根据路由路径自动更新选中状态
        if (location.pathname === "/") {
            setSelectedCategory("home");
        } else {
            const categoryMatch = location.pathname.match(/\/category\/(\w+)/);
            if (categoryMatch) {
                setSelectedCategory(categoryMatch[1]);
            }
        }
    }, [location.pathname]);

    useEffect(() => {
        console.log("SC context", selectedCategory);
    }, [selectedCategory]);

    return (
        <SelectedCategoryContext.Provider value={{selectedCategory, setSelectedCategory}}>
            {children}
        </SelectedCategoryContext.Provider>
    );
};

export default SelectedCategoryProvider;

3. 简化Nav组件的点击逻辑 #

不再需要通过点击事件手动设置状态，只需根据同步后的Context状态设置激活样式，并保留菜单关闭逻辑：

// Nav.tsx
import { useContext } from "react";
import "./nav.scss";
import { Link } from "react-router-dom";
import { ToggleMenuContext } from "../../util/context";
import { SelectedCategoryContext } from "../SelectedCategoryContext";

const Nav = () => {
    const { selectedCategory } = useContext(SelectedCategoryContext);
    const { setIsMenuOpen, setIsHamburgerClicked } = useContext(ToggleMenuContext);

    const handleLinkClick = () => {
        setIsMenuOpen(false);
        setIsHamburgerClicked(false);
    };

    return (
        <nav>
            <ul>
                <Link to="/" onClick={handleLinkClick}>
                    <li
                        className={selectedCategory === "home" ? "li selected-nav" : "li"}
                    >
                        {/* SVG内容 */}
                        <span>Home</span>
                    </li>
                </Link>
                <Link to="/category/general" onClick={handleLinkClick}>
                    <li
                        className={selectedCategory === "general" ? "li selected-nav" : "li"}
                    >
                        {/* SVG内容 */}
                        <span>General</span>
                    </li>
                </Link>
                {/* 其余分类项 */}
            </ul>
        </nav>
    );
};

export default Nav;

4. 配置服务器SPA fallback（生产环境） #

使用BrowserRouter时，生产服务器需要配置所有路径返回index.html，否则直接访问分类URL会触发服务器返回404，导致页面刷新。示例Nginx配置：

location / {
    try_files $uri $uri/ /index.html;
}

Create React App、Vite等框架的默认部署平台（Netlify、Vercel）已内置该配置。

为什么HashRouter能正常工作？ #

HashRouter的URL包含#，服务器仅处理#前的路径，所有子路径都会返回index.html，不会触发整页刷新，因此Context状态不会丢失。但BrowserRouter需要服务器配合处理所有路由路径，才能实现无刷新跳转。

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