React路由场景下从子组件修改父组件标题的实现问题

嗨，刚接触React遇到这种路由场景下的父子组件通信问题太正常啦，我来帮你捋清楚怎么实现从子组件更新父Layout里的标题～

针对你的需求，我给你两种实用的实现方案，你可以根据自己的场景选择：

方案一：用Context实现跨组件状态传递（适合动态标题场景） #

这种方法适合子组件需要自定义标题的情况（比如博客详情页要根据文章内容改标题），刚好你代码里已经导入了createContext，可以直接用：

首先修改你的Layout.tsx，把标题状态放进Context里，供子组件调用：

import { createContext, useContext, useState } from "react";
import { Outlet, Link } from "react-router-dom";

// 创建标题上下文，定义类型（TypeScript需要）
const TitleContext = createContext<{
  title: string;
  setTitle: (title: string) => void;
}>({
  title: "",
  setTitle: () => {},
});

// 封装一个自定义钩子，方便子组件调用
export const useTitle = () => useContext(TitleContext);

const Layout = () => {
  // 用useState管理标题状态，初始设为Home
  const [title, setTitle] = useState("Home");

  return (
    // 把标题和修改方法通过Provider传递给子组件
    <TitleContext.Provider value={{ title, setTitle }}>
      <>
        <h2>{title}</h2>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/blogs">Blogs</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>
        <Outlet />
      </>
    </TitleContext.Provider>
  );
};

export default Layout;

然后在子组件里，比如Home.tsx，导入我们封装的useTitle钩子，在组件挂载时设置标题：

import { useEffect } from "react";
import { useTitle } from "./Layout";

const Home = () => {
  const { setTitle } = useTitle();

  // 组件挂载后设置标题
  useEffect(() => {
    setTitle("Home");
  }, [setTitle]);

  return <div>Home Page</div>;
};

export default Home;

同样的，Blogs.tsx和Contact.tsx也照这个逻辑改就行，把setTitle的参数换成对应的标题就好。

方案二：监听路由变化直接设置标题（适合静态路由场景） #

如果你的标题是和路由路径一一对应的固定值，那不用改子组件，直接在Layout里监听路由变化就行，更简单：

修改Layout.tsx：

import { useState, useEffect } from "react";
import { Outlet, Link, useLocation } from "react-router-dom";

const Layout = () => {
  const [title, setTitle] = useState("Home");
  // 获取当前路由信息
  const location = useLocation();

  // 监听路由路径变化，更新标题
  useEffect(() => {
    switch (location.pathname) {
      case "/":
        setTitle("Home");
        break;
      case "/blogs":
        setTitle("Blogs");
        break;
      case "/contact":
        setTitle("Contact");
        break;
      // 可以加个默认情况，比如404页面
      default:
        setTitle("页面未找到");
    }
  }, [location.pathname]);

  return (
    <>
      <h2>{title}</h2>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/blogs">Blogs</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
      <Outlet />
    </>
  );
};

export default Layout;

这种方法下，子组件完全不用修改，路由切换时父组件会自动根据路径更新标题，很适合你的基础路由场景。

刚学React不用着急，慢慢理解状态管理和路由的结合，多试几次就懂啦～

备注：内容来源于stack exchange，提问作者Sandeep Thomas