根据当前页面/组件更改页面名称

Question

我想将我的 header 设置为动态显示当前页面标题。例如，当我跳转到可用数据组件时，我希望我的 Header 组件显示“可用数据”。

在 App.js 我设置了一个路由器：

<Route exact path = "/" component= { AvailableData } />
...

并且我使用 Navbar 组件在页面之间移动

<div className="app-navigation">
    <ul>
        <li className="lnk-icon" >
            <NavLink to="/available-data" activeClassName="active">
            <img src="img/bookmark.svg" alt="Available data" />Available data</NavLink>
        </li>
    ...

里面header，应该显示当前页面名称

    <div className="app-header">
         <div className="app-header__title">
             {title}  <-- Here
   </div>

Answer 1

您可以使用 useLocation() hook 并根据当前路径显示预期的名称。

例如，在您的 header 组件中

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


const Header = () => {
  const location = useLocation();

  const getCurrentTitle = () => {
    switch (location.pathname) {
      case "/":
      default:
        return "Home page";
      case "/available-data":
        return "Available data";
    }
  };

  return (
     <div className="app-header">
       <div className="app-header__title">
         {getCurrentTitle()}
       </div>
     </div>
  );
}

根据当前页面/组件更改页面名称

Changing page name based on current page / component

javascript

header

reactjs