React路由中为特定路由应用className的问题求助

问题根源：<Switch>的工作机制限制 #

你遇到的问题核心在于React Router的<Switch>组件特性：它只会渲染第一个匹配路径的直接子元素，且这个子元素必须是<Route>或<Redirect>组件。你在<Switch>里嵌套的<div>会被优先渲染（因为它不是路由组件，不存在路径匹配逻辑，相当于“默认匹配”），导致后面的<PrivateRoute>永远无法被匹配，同时<div>内部的<Route>也无法被Switch正确处理路由匹配，样式自然也就不能按预期生效。

解决方案1：用render属性包裹单个路由组件 #

我们可以给需要添加样式的路由使用render属性，在render函数里用带classes.root的<div>包裹对应组件，这样每个路由都是<Switch>的直接子元素，既不破坏路由匹配，又能正确应用样式：

function Routes() { 
  const classes = useStyles(); 
  return ( 
    <Router> 
      <Suspense fallback={<h3>Loading...</h3>}> 
        <Switch> 
          <Route path="/goto" component={GoTo} /> 
          {/* 对signin路由单独包裹样式 */}
          <Route path="/signin" render={() => (
            <div className={classes.root}>
              <Login />
            </div>
          )} />
          {/* 对signup路由单独包裹样式 */}
          <Route path="/signup" render={() => (
            <div className={classes.root}>
              <Signup />
            </div>
          )} />
          <PrivateRoute path="/" component={Private} /> 
        </Switch> 
      </Suspense> 
    </Router> 
  ); 
}

解决方案2：封装可复用的带样式路由组件 #

如果需要给多个路由添加相同样式，重复写<div>会很繁琐，我们可以封装一个自定义的StyledRoute组件，复用样式逻辑：

// 封装带样式的路由组件
const StyledRoute = ({ component: Component, className, ...rest }) => {
  return (
    <Route 
      {...rest} 
      render={(routeProps) => (
        <div className={className}>
          <Component {...routeProps} />
        </div>
      )} 
    />
  );
};

// 在Routes组件中使用
function Routes() { 
  const classes = useStyles(); 
  return ( 
    <Router> 
      <Suspense fallback={<h3>Loading...</h3>}> 
        <Switch> 
          <Route path="/goto" component={GoTo} /> 
          <StyledRoute path="/signin" component={Login} className={classes.root} />
          <StyledRoute path="/signup" component={Signup} className={classes.root} />
          <PrivateRoute path="/" component={Private} /> 
        </Switch> 
      </Suspense> 
    </Router> 
  ); 
}

关键注意事项 #

• 永远不要在<Switch>的直接子元素中放置非路由组件（比如<div>、<p>等），否则会完全打乱Switch的路由匹配逻辑。
• 如果使用render属性，记得把路由的props（比如match、location、history）传递给子组件，确保组件能正常使用路由相关功能（上面的示例中已经通过{...routeProps}传递了）。

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