React侧边栏点击按钮后，如何将按钮标题设为页面H1？

我正在开发React应用，已经创建了侧边栏组件和NavbarData配置，每个路由对应一个带标题的菜单项。现在希望页面顶部的H1能根据当前路由自动显示对应项的标题，但尝试注入this.item.title以及编写更新函数都没成功，相关代码如下：

Navbar组件代码 #

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { NavbarData } from "./NavbarData";
import { IconContext } from "react-icons";
import "./Navbar.css";
import Hamburger from "./Icons/Hamburger.svg";
import closeIcon from "./Icons/Close.svg";
import "./Icons/p_logo_color.png";

function Navbar() {
  const [sidebar, setSidebar] = useState(false);
  const showSidebar = () => setSidebar(!sidebar);
  var pageName = ;

  return (
    <>
      <IconContext.Provider value={{ color: "undefined" }}>
        <div className="navbar">
          <Link to="#" className="menu-bars">
             <img src={Hamburger} alt="" onClick={showSidebar} />
          </Link>
          <div className="pageTitle"><h1>{pageName}</h1></div>
        </div>
        <nav className={sidebar ? "nav-menu active" : "nav-menu"}>
          <ul className="nav-menu-items" onClick={showSidebar}>
            <li className="navbar-toggle">
              <Link to="#" className="menu-bars">
              <img src={closeIcon} alt=''/>
              </Link>
            </li>
            {NavbarData.map((item, index) => {
              return (
                <li key={index} className={item.cName}>
                  <Link to={item.path}>
                    <span className="navbutton-text" ><span className="navbutton-icon">{item.icon}</span>{item.title}</span>
                  </Link>
                </li>
              );
            })}
          </ul>
        </nav>
      </IconContext.Provider>
    </>
  );
}

export default Navbar;

NavbarData代码 #

import React from 'react'

import * as IoIcons from 'react-icons/io';
import settingsIcon from './Icons/Settings.svg';
import startpageIcon from './Icons/startpage.svg';
import performanceIcon from './Icons/Persona.svg';

export const NavbarData = [
    {
        title: 'Monitoring Overview',
        path: '/monitoringoverview',
        icon: <img src={startpageIcon} alt="" />,
        cName: 'nav-text'
    },
    {
        title: "Performance Quality",
        path: "/performancequality",
        icon: <img src={performanceIcon} alt="" />,
        cName: 'nav-text'
    },
    {
        title: "Finance",
        path: "/finance",
        icon: <IoIcons.IoIosPaper />,
        cName: 'nav-text'
    },
    {
        title: "Fraud and Anomalies",
        path: "/fraudandanomalies",
        icon: <IoIcons.IoIosPaper />,
        cName: 'nav-text'
    },
    {
        title: "Simulation",
        path: "/simulation",
        icon: <IoIcons.IoIosPaper />,
        cName: 'nav-text'
    },
    {
        title: "Planning",
        path: "/planning",
        icon: <IoIcons.IoIosPaper />,
        cName: 'nav-text'
    },
    {
        title: "Settings",
        path: "/settings",
        icon: <img src={settingsIcon} alt="" />,
        cName: 'nav-text'
    },
]

要实现根据当前路由自动更新顶部H1标题，你可以借助react-router-dom的useLocation钩子获取当前路径，再匹配NavbarData里对应的标题，具体修改步骤如下：

1. 在Navbar组件中导入useLocation：

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

2. 在组件内部获取当前路由路径，并匹配对应的标题：

const location = useLocation();
// 匹配当前路由对应的标题，找不到则默认用第一个菜单项的标题
const currentPage = NavbarData.find(item => item.path === location.pathname) || NavbarData[0];
const pageName = currentPage.title;

3. 替换原来的var pageName = ;代码，修改后的完整Navbar组件如下：

import React, { useState } from "react";
import { Link, useLocation } from "react-router-dom";
import { NavbarData } from "./NavbarData";
import { IconContext } from "react-icons";
import "./Navbar.css";
import Hamburger from "./Icons/Hamburger.svg";
import closeIcon from "./Icons/Close.svg";
import "./Icons/p_logo_color.png";

function Navbar() {
  const [sidebar, setSidebar] = useState(false);
  const showSidebar = () => setSidebar(!sidebar);
  const location = useLocation();
  const currentPage = NavbarData.find(item => item.path === location.pathname) || NavbarData[0];
  const pageName = currentPage.title;

  return (
    <>
      <IconContext.Provider value={{ color: "undefined" }}>
        <div className="navbar">
          <Link to="#" className="menu-bars">
             <img src={Hamburger} alt="" onClick={showSidebar} />
          </Link>
          <div className="pageTitle"><h1>{pageName}</h1></div>
        </div>
        <nav className={sidebar ? "nav-menu active" : "nav-menu"}>
          <ul className="nav-menu-items" onClick={showSidebar}>
            <li className="navbar-toggle">
              <Link to="#" className="menu-bars">
              <img src={closeIcon} alt=''/>
              </Link>
            </li>
            {NavbarData.map((item, index) => {
              return (
                <li key={index} className={item.cName}>
                  <Link to={item.path}>
                    <span className="navbutton-text" ><span className="navbutton-icon">{item.icon}</span>{item.title}</span>
                  </Link>
                </li>
              );
            })}
          </ul>
        </nav>
      </IconContext.Provider>
    </>
  );
}

export default Navbar;

补充说明 #

• useLocation会实时返回当前路由的位置对象，其中pathname就是当前页面的路径；
• 用Array.find匹配路径对应的菜单项，若路径不存在（比如输入错误路由），则默认取第一个项的标题，避免页面出现空白；
• 路由切换时，useLocation会自动更新，触发组件重新渲染，从而同步更新顶部标题。

内容的提问来源于stack exchange，提问作者Noam TheLoreFnatic Hadad