React如何识别当前渲染路由组件 动态修改styled-components样式

不需要主动识别当前渲染的路由组件，直接通过路由库提供的位置API获取当前路径，配合styled-components的动态props能力就能实现不同路由下的样式切换，步骤如下：

1. 获取当前路由路径 #

React Router（React生态最常用的路由方案）内置了useLocation钩子，在组件内调用即可拿到当前页面的路径信息：

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

// 在Navbar组件内部直接调用
const location = useLocation();
// 返回值的pathname字段就是当前页面路径，比如/login、/home

如果是类组件，用withRouter高阶组件包裹Navbar后，也能从props中拿到location对象。

2. 改造样式组件支持动态属性 #

styled-components原生支持根据传入的props动态生成CSS，你可以把硬编码的position属性改成动态判断写法。推荐用$开头的临时属性（Transient Props，styled-components 5.1+版本支持），可以避免自定义属性被透传到原生DOM节点，减少控制台警告：

const NavbarContainer = styled.div`
  height: 115px;
  font-family: 'Domine', serif;
  align-content: center;
  align-items: center;
  /* 根据传入的属性动态设置position值 */
  position: ${props => props.$isLoginPage ? 'static' : 'absolute'};
  z-index: 4;
  width: 100vw;
  overflow: hidden;

  &:hover {
    background-color: white;
    color: black !important;
  }
`;

如果你的styled-components版本低于5.1，去掉属性名前的$即可，只会出现DOM不识别自定义属性的警告，不影响功能运行。

3. 传入路由判断结果 #

拿到当前路径后，判断是否为Login页面对应的路由，把布尔结果传给样式组件就完成了：

const Navbar = () => {
  const location = useLocation();
  // 这里替换成你项目中Login页面的实际路由路径
  const isLoginPage = location.pathname === '/login';

  return (
    <NavbarContainer $isLoginPage={isLoginPage}>
      {/* 导航栏具体业务内容 */}
    </NavbarContainer>
  )
}

扩展说明 #

• 如果后续需要给更多页面配置差异化样式，只需要扩展路径判断逻辑，给NavbarContainer传入对应的控制属性即可，比如判断是否为个人中心页、详情页来修改导航栏高度、背景色、文字颜色等属性。
• 不推荐直接对比当前渲染的组件实例判断页面，这种方式耦合度高，还会受路由嵌套、组件懒加载等逻辑影响出现判断错误，基于路径判断是路由场景下稳定性最高的方案。

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