React作品集网站：URL参数与全局Context关联问题排查

我用React搭建了一个作品集网站，用来展示平面设计和前端开发作品。用户进入着陆页（Landing.js）后，点击「design」或「web」选项，会在全局Context中设置对应状态并跳转到About.js页面，展示对应简介和项目，期望URL与选择匹配为/design或/web。但遇到了问题：

• 首次手动修改URL（比如从/design改到/web），About.js内容会更新；但再次改回/design时，内容不再变化
• 从/web开始操作也会出现同样的问题

想解决两个问题：

1. 如何让基于全局状态渲染的简介和项目随URL同步变更
2. 为什么只有首次手动修改URL生效

App.js #

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import Landing from "./components/Landing";
import About from "./components/About";
import './App.css';
import SiteProvider from "./utils/SiteContext";

function App() {
  return (
    <div className="App">
      <SiteProvider>
        <Router>
          <Routes>
            <Route element={<Landing />} exact path="/" />
            <Route element={<About />} exact path="/design" />
            <Route element={<About />} exact path="/web" />
          </Routes>
        </Router>
      </SiteProvider>
    </div>
  );
}

export default App;

SiteContext.js #

import React, { createContext, useState, useContext } from "react";

export const SiteContext = createContext();
export const useSite = () => useContext(SiteContext);

export default function SiteProvider({ children }) {
    const [field, setField] = useState('');

    const pickDesign = () => {
        return setField("design")
    };

    const pickWeb = () => {
        return setField("web")
    };
  
    return (
      <SiteContext.Provider value={{ field, pickDesign, pickWeb }}>
        {children}
      </SiteContext.Provider>
    );
};

Landing.js #

import React, { useEffect } from "react";
import { useSite } from "../utils/SiteContext";
import { useNavigate } from "react-router-dom";
import '../App.css';

export default function Landing() {
  const { field, pickDesign, pickWeb } = useSite();

  const navigate = useNavigate();

  useEffect(() => {
    navigate("/"+`${field}`);
  }, [field])

  return (
    <div>
      <section id="about">
        <div id="bio" onClick={pickDesign}>
            <h1>gz919 is a <span className="bioBold">graphic designer</span>.</h1>
        </div>

        <div id="bio2" onClick={pickWeb}>
            <h1>gz919 is a <span className="bioBold2">web developer</span>.</h1>
        </div>
      </section>
    </div>
  );
}

About.js #

import React from "react";
import { useSite } from "../utils/SiteContext";
import '../App.css';

import Header from "./Header";
import Projects from "./Projects";
import Contact from "./Contact";
import Footer from "./Footer";

import { designProjects, webProjects } from "../utils/projectlists.js";

function About() {
  const { field } = useSite();

  return (
    <div>
      <Header />

      <div>
        <section id="about">
          <div id="bio">
            {field === "design" ?
              <h1>gz919 is a <span className="bioBold">graphic designer</span> from and based in San Antonio, Texas.</h1> :
              <h1>gz919 is a <span className="bioBold">web developer</span> from and based in San Antonio, Texas.</h1>
            }  
          </div>
        </section>
      </div>
      
      {field==="design" ? <Projects projects={designProjects}/> : <Projects projects={webProjects}/>}

      <Contact />
      <Footer />
    </div>
  );
}

export default About;

核心问题是全局Context的field状态与URL完全脱节：

• 手动修改URL时，路由发生变化，但Context里的field没有同步更新
• 首次修改URL生效是巧合：初始field为空，About.js会默认走else分支显示web内容；但后续修改URL时，field还是停留在之前的值（或空），导致渲染内容不随URL变化

要实现状态与URL双向同步，分三步修改：

1. 让Context监听路由变化，自动同步状态 #

在SiteContext.js中引入useLocation监听URL，一旦路由变化就更新field：

import React, { createContext, useState, useContext, useEffect } from "react";
import { useLocation } from "react-router-dom"; // 新增

export const SiteContext = createContext();
export const useSite = () => useContext(SiteContext);

export default function SiteProvider({ children }) {
    const [field, setField] = useState('');
    const location = useLocation(); // 获取当前路由路径

    // 监听URL变化，同步更新field状态
    useEffect(() => {
        const currentField = location.pathname.slice(1); // 去掉开头的/，得到design或web
        if (['design', 'web'].includes(currentField)) {
            setField(currentField);
        }
    }, [location]);

    const pickDesign = () => {
        setField("design");
    };

    const pickWeb = () => {
        setField("web");
    };
  
    return (
      <SiteContext.Provider value={{ field, pickDesign, pickWeb }}>
        {children}
      </SiteContext.Provider>
    );
};

2. 优化Landing.js的跳转逻辑 #

原来的useEffect会导致无限循环（比如用户手动回到/时，会自动跳转到/${field}），改成点击时直接同步状态+跳转：

import React from "react";
import { useSite } from "../utils/SiteContext";
import { useNavigate } from "react-router-dom";
import '../App.css';

export default function Landing() {
  const { pickDesign, pickWeb } = useSite();
  const navigate = useNavigate();

  const handleDesignClick = () => {
    pickDesign();
    navigate("/design");
  };

  const handleWebClick = () => {
    pickWeb();
    navigate("/web");
  };

  return (
    <div>
      <section id="about">
        <div id="bio" onClick={handleDesignClick}>
            <h1>gz919 is a <span className="bioBold">graphic designer</span>.</h1>
        </div>

        <div id="bio2" onClick={handleWebClick}>
            <h1>gz919 is a <span className="bioBold2">web developer</span>.</h1>
        </div>
      </section>
    </div>
  );
}

3. 可选：简化逻辑，直接从URL取参数 #

如果全局状态不需要用于其他场景，完全可以让About.js直接从URL获取当前字段，彻底摆脱对Context的依赖：

import React from "react";
import { useLocation } from "react-router-dom"; // 新增
import '../App.css';

import Header from "./Header";
import Projects from "./Projects";
import Contact from "./Contact";
import Footer from "./Footer";

import { designProjects, webProjects } from "../utils/projectlists.js";

function About() {
  const location = useLocation();
  const field = location.pathname.slice(1); // 从URL提取design或web

  return (
    <div>
      <Header />

      <div>
        <section id="about">
          <div id="bio">
            {field === "design" ?
              <h1>gz919 is a <span className="bioBold">graphic designer</span> from and based in San Antonio, Texas.</h1> :
              <h1>gz919 is a <span className="bioBold">web developer</span> from and based in San Antonio, Texas.</h1>
            }  
          </div>
        </section>
      </div>
      
      {field==="design" ? <Projects projects={designProjects}/> : <Projects projects={webProjects}/>}

      <Contact />
      <Footer />
    </div>
  );
}

export default About;

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