React如何在多个指定路由页面隐藏导航栏切换按钮？

最小改动适配现有代码逻辑 #

之前的判断逻辑只做了单个/login路径的匹配，没有覆盖另外两个需要隐藏的页面。只要把需要隐藏的路径整理成集合，通过数组匹配的方式统一判断即可，不需要写多段冗余的等值判断：

• 先在Navbar组件内定义所有需要隐藏按钮的路径数组，后续需要增减隐藏规则直接修改数组内容就行
• 判断当前访问路径是否在隐藏集合内，命中规则就不渲染切换按钮

对应的修改后Navbar.js代码：

const Navbar = props => {
    // 维护需要隐藏按钮的路径清单
    const hiddenTogglePaths = ['/login', '/signup', '/forgot-password'];
    // 判断当前路径是否命中隐藏规则
    const shouldHideToggle = hiddenTogglePaths.includes(window.location.pathname);

    return(
       {/* 未命中隐藏规则时才渲染切换按钮 */}
       {!shouldHideToggle && (
         <button 
           className="navbar-toggler" 
           type="button" 
           data-toggle="collapse" 
           data-target="#navbarNav"
           aria-controls="navbarNav" 
           aria-expanded="false" 
           aria-label="Toggle navigation"
         >
                <span className="navbar-toggler-icon"/>
         </button>
       )}
    )
}

更稳定的路由感知写法 #

直接读取window.location.pathname的写法存在兼容性问题：单页应用内部路由跳转时，有时不会触发Navbar组件的重渲染，会出现路径已经跳转到登录页，但切换按钮还显示的异常。
如果项目已经引入react-router，可以用官方提供的useLocation Hook获取当前路由信息，路由变化时会自动更新组件状态，避免渲染异常：

// 从react-router依赖中引入路由位置Hook
import { useLocation } from 'react-router-dom';

const Navbar = props => {
    // 自动获取当前访问的路由路径
    const { pathname } = useLocation();
    const hiddenTogglePaths = ['/login', '/signup', '/forgot-password'];
    const shouldHideToggle = hiddenTogglePaths.includes(pathname);

    return(
       {!shouldHideToggle && (
         <button 
           className="navbar-toggler" 
           type="button" 
           data-toggle="collapse" 
           data-target="#navbarNav"
           aria-controls="navbarNav" 
           aria-expanded="false" 
           aria-label="Toggle navigation"
         >
                <span className="navbar-toggler-icon"/>
         </button>
       )}
    )
}

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