React中基于pathname的组件条件渲染问题排查

嘿，这问题我熟！你踩了一个JavaScript类型比较的小坑，我来给你捋清楚怎么解决：

问题根源 #

你前面生成特殊路径数组special的逻辑是对的，但判断条件pathname !== special完全搞错了方向——special是数组，pathname是字符串，JavaScript里把数组和字符串做不等比较时，会自动把数组转成逗号分隔的字符串（比如你的数组["/parent/page1", "/parent/page2"]会变成"/parent/page1,/parent/page2"）。这时候不管当前路径是什么，和这个拼接出来的字符串肯定不相等，所以Header永远会被渲染，特殊路径下自然不会被移除。

修正方案 #

你需要检查当前pathname是否存在于特殊路径数组里，用数组的includes()方法就可以完美解决这个问题：

// 保留你正确的路径获取和数组生成逻辑
const pathname = this.props.location.pathname;
const specialPages = get(this.props, 'data.allContentfulSpecialPages.edges');
const special = specialPages.map(({ node: page }) => `/parent/${page.slug}`);

// 修正判断逻辑：检查当前路径是否在特殊数组中
const PageHeader = special.includes(pathname) ? null : <Header />;

如果想写得更清晰一点，也可以拆分判断：

let PageHeader;
// 如果当前路径不在特殊列表里，渲染Header；否则不渲染
if (!special.includes(pathname)) {
  PageHeader = <Header />;
} else {
  PageHeader = null;
}

额外提示 #

includes()方法用的是**严格相等（===）**来匹配元素，所以会精确匹配路径。如果之后你需要支持模糊匹配（比如子路径也隐藏Header），可以改用some()方法结合字符串匹配：

const isSpecialPage = special.some(specialPath => pathname.startsWith(specialPath));
const PageHeader = isSpecialPage ? null : <Header />;

这样就能精准控制哪些页面显示Header，哪些页面隐藏啦！

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