MUI ToggleButtonGroup首个默认选中标签首屏加载未渲染问题

问题现象 #

项目基于MUI ToggleButtonGroup 实现嵌套标签切换功能：

• 外层标签为「USTAWIENIA」
• 内层包含「PARAMETRY GRANICZNE」和「CYKL PRZEGLĄDOWY」两个子标签
  页面初始加载时，首个子标签已自带Mui-selected类，显示下划线选中样式，但对应组件未挂载，仅手动点击首个标签后组件才会正常渲染。
  

相关实现代码 #

内层标签内容切换基于React Router的Switch+Route实现，核心代码如下：

<TrainsGlobalToolbar />
<TrainsSettingsContentWrapper>
    <TrainsSettingsToolbarWrapper>
        <StyledName>{settingsTxt}</StyledName>
        <ToggleButtonGroupStyled
            value={alignment}
            exclusive
            onChange={handleAlignment}
            color="warning"
        >
            <ToggleButtonStyled
                aria-label={marginParametersTxt}
                onClick={() => handleGoToMarginParameters()}
                value={'/trains-settings/margin-parameters'}
            >
                {marginParametersTxt}
            </ToggleButtonStyled>
            <ToggleButtonStyled
                aria-label={reviewCycleTxt}
                onClick={() => handleGoToMaintenanceCycle()}
                value={'/trains-settings/review-cycle'}
            >
                {reviewCycleTxt}
            </ToggleButtonStyled>
        </ToggleButtonGroupStyled>
        <StyledHistoryChangesContent>
            <HistoryClockIcon />
            <StyledText>{historyChangesTxt}</StyledText>
        </StyledHistoryChangesContent>
    </TrainsSettingsToolbarWrapper>
    <StyledLineBreak />
    <Switch>
        <Route
            exact
            path={Routes.TrainsSettingsMarginParameters.path}
        >
            <TrainsTresholdParametersList columns={columns} />
        </Route>
        <Route exact path={Routes.TrainsSettingsReviewCycle.path}>
            <TrainSettingsReviewCycle />
        </Route>
    </Switch>
</TrainsSettingsContentWrapper>

问题原因 #

核心问题是初始进入父级页面时，路由未自动重定向到首个子标签对应路径：

• ToggleButtonGroup的value（即代码中alignment变量）初始值硬编码为首个子标签路径，因此标签本身显示选中态
• 但此时浏览器地址栏实际路径为父级路径（如/trains-settings），不在Switch配置的两个子路由匹配范围内，对应组件不会渲染
• 手动点击标签时，onClick绑定的路由跳转方法才会将地址修改为子路由路径，触发组件渲染

解决方案 #

方案1：添加父路由重定向规则（推荐） #

在Switch顶部添加重定向规则，访问父级设置页路径时自动跳转到首个子标签对应路由，从路由层面保证选中态和内容同步：

<Switch>
    {/* 新增：父路径默认重定向到首个子标签页 */}
    <Redirect
        exact
        from={Routes.TrainsSettings.path}
        to={Routes.TrainsSettingsMarginParameters.path}
    />
    <Route
        exact
        path={Routes.TrainsSettingsMarginParameters.path}
    >
        <TrainsTresholdParametersList columns={columns} />
    </Route>
    <Route exact path={Routes.TrainsSettingsReviewCycle.path}>
        <TrainSettingsReviewCycle />
    </Route>
</Switch>

如果使用React Router v6版本，Redirect组件替换为Navigate，写法调整为：

<Route
    exact
    path={Routes.TrainsSettings.path}
    element={<Navigate to={Routes.TrainsSettingsMarginParameters.path} replace />}
/>

方案2：组件挂载时主动触发首个路由跳转 #

如果不修改路由配置，可在当前设置页组件挂载生命周期中，判断当前路径为父级路径时主动调用首个标签的跳转方法：

// 函数组件使用useEffect
useEffect(() => {
    if (history.location.pathname === Routes.TrainsSettings.path) {
        handleGoToMarginParameters()
    }
}, [])

类组件将上述逻辑写入componentDidMount生命周期即可。

额外优化建议 #

移除单独维护的alignment状态，直接取当前路由路径作为ToggleButtonGroup的value，从根源避免标签选中态和实际路由不同步的问题：

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

// 组件内获取当前路径
const location = useLocation();

<ToggleButtonGroupStyled
    value={location.pathname} // 直接用当前路径作为选中值
    exclusive
    onChange={handleAlignment}
    color="warning"
>

修改后无需在每次跳转时手动同步alignment值，路由变化时选中态会自动更新。

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