React Router Navbar 背景更改仅适用于 pages 文件夹，但不适用于 App.js？答案

【问题标题】：React Router Navbar background change only works in pages folder, but not on App.js?React Router Navbar 背景更改仅适用于 pages 文件夹，但不适用于 App.js？
【发布时间】：2020-12-13 18:24:31
【问题描述】：

这是一个代码框https://codesandbox.io/s/recursing-rhodes-ffcmc?file=/src/components/Navbar.js:792-856

现在它只是改变了路线，但导航背景颜色保持不变。

所以，我有这个导航栏组件，它可以根据我所在的特定页面更改背景颜色。如果我将导航栏单独添加到每个页面，它工作正常。但是，我最终会重复大量代码。

这是我原来的设置

--pages
   Home.js
   About.js
   Contact.js

这是我在主页上切换移动菜单打开和关闭的功能

  const Home = () => {
        const [isOpen, setIsOpen] = useState(false);

        const toggle = () => {
          setIsOpen(!isOpen);
        };

        return (
          <>
            <Dropdown isOpen={isOpen} toggle={toggle} />
            <Navbar toggle={toggle} />
            <h1>Home Page</h1>
          </>
        );
      };

      export default Home;

现在我的问题是这被硬编码到我的 Home.js 文件中，所以如果我希望我的导航栏和下拉菜单在任何其他页面上工作，我必须复制并粘贴完全相同的组件 + 函数来打开/关闭移动菜单。

如果我尝试在 App.js 上添加它，以便它显示在每个页面上，那么这就是我的问题发生并且我必须更改导航栏背景的功能停止工作的时候

      function App() {
        const [isOpen, setIsOpen] = useState(false);

        const toggle = () => {
          setIsOpen(!isOpen);
        };

        return (
          <>
            <Dropdown isOpen={isOpen} toggle={toggle} />
            <Navbar toggle={toggle} />
            <Switch>
              <Route path='/' exact component={Home} />
              <Route path='/about' component={About} />
              <Route path='/contact' component={Contact} />
            </Switch>
          </>
        );
      }

      export default App;

这是我的函数，它根据我的 Navbar.js 中的窗口位置路径名更改导航栏

      const Navbar = ({ toggle }) => {
        const [navbar, setNavbar] = useState(false);

        useEffect(() => {
          if (window.location.pathname) {
            setNavbar(window.location.pathname);
          }

          console.log(window.location.pathname);
        }, []);

那么为什么当我在每个页面中手动硬编码导航栏时，我的导航栏会改变背景颜色，但是当我尝试将它添加到我的 App.js 时它停止工作？

每当我将导航栏添加到App.js 文件时，我获取window.location.pathname 的功能似乎停止工作，但如果我手动将导航栏添加到我的 pages/Home.js 文件中，它完全可以正常工作。这是为什么呢？

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

因为每次导航发生时都会安装/卸载<Navbar /> 组件，所以它工作正常，因此正在调用具有空依赖项数组的useEffect。

由于您将 <Navbar /> 移动到上层组件（您实际上应该这样做），因此您的 useEffect 仅被调用一次。确保import { useLocation } from 'react-router-dom

要解决此问题，请执行以下操作：

    const location = useLocation();
    useEffect(() => {
      if (location.pathname) {
        setNavbar(location.pathname);
      }

      console.log(location.pathname);
    }, [location.pathname]);

您也可以使用useLocation 挂钩而不是window.location 来访问pathname。 https://reactrouter.com/web/api/Hooks/uselocation

这是工作代码和框示例： https://codesandbox.io/s/cranky-architecture-d76pl?file=/src/components/Navbar.js

【讨论】：

仍然没有根据路径名更新我的导航栏背景颜色。它只是给了我这个错误React Hook useEffect has an unnecessary dependency: 'window.location.pathname'. Either exclude it or remove the dependency array. Outer scope values like 'window.location.pathname' aren't valid dependencies because mutating them doesn't re-render the component
我已经更新了我的代码，以便您可以更轻松地重复使用它。它使用我最初提到的useLocation 作为首选方式。另外，请查看我提供的链接以进一步熟悉自己。
但我必须降级才能反应 16.8 我如何在不降级反应版本的情况下获得位置？
为什么必须降级？您在package.json 中指定了哪个react-router-dom 版本？
我有最新的反应版本，但由于某种原因我仍然收到该错误。 ` “react”：“^17.0.1”，“react-dom”：“^17.0.1”，“react-icons”：“^4.1.0”，“react-router-dom”：“^5.2. 0", "react-scripts": "4.0.1",` 你知道为什么会这样吗？

【解决方案2】：

问题出在 useEffect 中，它只会在第一次挂载时调用，并且有一个名为 useLocation 的钩子会在位置更改时重新渲染您的组件。

这里是最终代码：

const NavBar =()=>{
    const {pathname}= useLocation()
    
    return <div style={{backgroundColor:pathname==="/"?"red":"white"}}>navbar</div>
}

【讨论】：