如何在React应用中使用多导航栏？路由切换不生效问题求助

你当前的问题根源在于直接使用window.location.pathname——React Router单页应用路由切换时不会刷新页面，这个值变化时无法触发Navbar组件重新渲染。改用React Router内置的useLocation钩子就能解决问题。

修改后的Navbar代码示例： #

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

function Navbar() {
  const location = useLocation();
  const pathname = location.pathname;

  if (pathname === "/") {
    return (
      <nav style={{ backgroundColor: "rgb(17, 105, 142)" }}>...</nav>
    );
  } else if (pathname === "/products") {
    return (
      <nav className="products-nav">...</nav>
    );
  } else if (pathname === "/addproducts") {
    return (
      <nav className="addproducts-nav">...</nav>
    );
  } else {
    // 默认导航栏
    return <nav>...</nav>;
  }
}

核心说明： #

• 导入useLocation钩子后，它会返回当前路由的位置对象，每当路由切换时，这个对象会自动更新，进而触发Navbar组件重新渲染。
• 用location.pathname替代window.location.pathname获取当前路径，就能实现导航栏随路由切换实时变化的效果。

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