React如何隐藏所有前缀为/admin/路径页面的导航栏并简化冗余代码

现有代码问题说明 #

你目前写的串联&&判断本身存在逻辑错误：只有第一个window.location.pathname === '/admin/info'是等值比较，后续的非空字符串在布尔判断中恒为真，最终只有/admin/info路径会触发隐藏逻辑，其他你列的/admin/前缀路径都不会生效。

简化方案 #

方案1：匹配所有/admin/前缀路径（最符合你的需求）

直接用字符串startsWith方法判断前缀，不需要逐个枚举路径：

let HideHeader = window.location.pathname.startsWith('/admin/') ? null : <MyNav username={username} />

说明：判断条件加了末尾的斜杠，是为了避免误匹配/administrator这类前缀相似的路径，如果不需要这个限制可以改成startsWith('/admin')

方案2：仅匹配指定的/admin/子路径

如果后续你只需要部分/admin/下的路径隐藏导航，可以用数组枚举+includes判断的写法，比串联判断更简洁易维护：

// 统一管理需要隐藏导航的路径，新增/删除路径直接改数组即可
const hideNavPathList = ['/admin/info', '/admin/setting', '/admin/post', '/admin/messange']
let HideHeader = hideNavPathList.includes(window.location.pathname) ? null : <MyNav username={username} />

内容的提问来源于stack exchange，提问作者Thanh Hải