如何在反应导航中隐藏标题 - Javascript

在React导航中隐藏标题，可以通过设置页面组件的标题，或者使用CSS样式实现。以下是两种方法的示例：

设置页面组件的标题

import React from 'react';
import { Link } from 'react-router-dom';

const Page = () => {
  React.useEffect(() => {
    document.title = "页面标题";
  }, []);

  return (
    <div>
      <h1>页面内容</h1>
      <Link to="/other">其他页面</Link>
    </div>
  );
};

export default Page;

在页面组件中，可以使用useEffect钩子函数，监听页面加载时的生命周期，然后设置document.title属性即可。这样，在浏览器的标签页中，就会显示设置的页面标题。

使用CSS样式实现

import React from 'react';
import { NavLink } from 'react-router-dom';

const Navbar = () => {
  return (
    <nav>
      <ul>
        <li>
          <NavLink to="/" exact activeClassName="active">
            首页
          </NavLink>
        </li>
        <li>
          <NavLink to="/about" activeClassName="active">
            关于
          </NavLink>
        </li>
      </ul>
    </nav>
  );
};

export default Navbar;

在导航栏组件中，可以使用CSS样式来隐藏菜单项的标题，只显示图标或者其它内容。

nav ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

nav ul li a span {
  display: none;
}

nav ul li a:before {
  content: "\f015";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.5rem;
}

.active:before {
  color: red;
}

在上面的例子中，使用了FontAwesome字体图标库来显示菜单项的图标。通过设置a元素的样式，将标题span元素隐藏，只显示图标。具体的样式可以根据实际需求进行调整。

以上两种方法，可以根据需求来选择。在实际开发中，也可以根据具体的情况，结合两种方法来实现最佳效果。