React中用react-route-dom配置路由时如何设置共享组件差异化样式

下面是三种生产环境常用的实现方式，可根据项目复杂度选型：

• 基于路由路径动态匹配样式
  直接在共享组件内调用react-router-dom提供的useLocation钩子获取当前路由路径，判断是否为首页后绑定不同样式类即可，是成本最低的实现方式。

  import { useLocation } from 'react-router-dom';
  import styles from './SharedComponent.module.css';
  
  export default function SharedComponent() {
    const { pathname } = useLocation();
    // 若首页存在别名路由（如/index），可自行扩展匹配规则
    const isHome = pathname === '/';
  
    return (
      <div className={isHome ? styles.homeWrapper : styles.commonWrapper}>
        {/* 组件业务内容 */}
      </div>
    )
  }
  

  适合只有少量组件需要区分样式、判断逻辑简单的场景。

• 组件暴露样式Props由父页面传入
  共享组件预留样式接收入口，不内置路由判断逻辑，各页面在引入组件时自行传入需要的样式类或行内样式，耦合度最低。

  // 共享组件定义
  export default function SharedComponent({ className = '' }) {
    return (
      <div className={`shared-default ${className}`}>
        {/* 组件业务内容 */}
      </div>
    )
  }
  
  // 首页中引入
  import homeStyles from './Home.module.css';
  <SharedComponent className={homeStyles.sharedBox} />
  
  // 其他页面中引入
  import pageStyles from './OtherPage.module.css';
  <SharedComponent className={pageStyles.sharedBox} />
  

  适合组件复用场景多、不同页面样式差异较大的情况，后续单个页面要做特殊样式调整也不需要修改公共组件代码。

• 布局路由+Context统一注入页面状态
  如果项目中有大量共享组件需要区分首页/非首页样式，可以借助React Router的布局路由能力，给首页和其他页面分别套一层根布局，通过Context全局下发当前页面类型，所有共享组件直接读取状态切换样式即可，不需要重复写判断或者逐层传Props。

  // 路由配置示例
  const router = createBrowserRouter([
    {
      path: '/',
      element: <HomeLayout />, // 该布局内通过Context注入isHome: true
      children: [{ index: true, element: <HomePage /> }]
    },
    {
      element: <CommonLayout />, // 该布局内通过Context注入isHome: false
      children: [
        // 其余所有非首页路由配置
      ]
    }
  ])
  
  // 共享组件内读取状态
  const { isHome } = usePageContext();
  const wrapClass = isHome ? styles.homeWrap : styles.normalWrap;
  

  适合中大型项目使用，后续如果要扩展首页和其他页面的全局差异（比如主题、埋点规则），直接在布局层修改即可，维护成本最低。

选型参考：如果只是临时改1、2个组件的样式，选第一种路径判断的方式最快；如果项目长期迭代，优先选后两种解耦性更好的方案。

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