访问特定路由后React Router v5的Switch组件失效问题求助

问题根因 #

你遇到的Switch不响应路由变化的问题，主要是三个常见的React + react-router v5使用不规范导致的：

1. JSX中直接使用class属性而非React要求的className，导致React DOM diff逻辑异常，打断组件重渲染流程
2. 组件顶层直接执行DOM操作，不符合React生命周期规范，可能触发意外的重渲染阻塞
3. Switch未显式绑定最新的location对象，部分场景下无法感知路由状态更新

修复步骤 #

1. 修正DOM操作的执行时机 #

把组件顶层的DOM修改逻辑移到useEffect钩子中，仅在组件挂载和依赖项变化时执行：

import React, { useEffect } from 'react';
// 其余导入保持不变

export default function Book(props)
{
    useEffect(() => {
        html().classList.add("js");
        html().classList.add("sidebar-visible");
        document.title = props.book_title;
    }, [props.book_title]);

    // 后续return逻辑保持不变
}

2. 替换所有JSX中的class为className #

React不识别原生的class属性，必须使用className来绑定DOM样式类：

<div id="page-wrapper" className="page-wrapper">
    <div className="page">
        {/* 其余JSX保持不变 */}
    </div>
</div>

3. 给Switch显式传入location属性 #

抽离Switch相关逻辑为单独组件，使用useLocation钩子拿到最新路由状态传入Switch，强制其响应路由变化，同时添加兜底路由实现无效路径返回空内容的需求：

// 新增单独的路由内容组件
function RouteContent(props) {
    const location = RRD.useLocation();
    return (
        <>
            <TOC chapters={props.source.sections()}/>
            <div id="page-wrapper" className="page-wrapper">
                <div className="page">
                    <PageHeader searchable={props.searchable} title={props.book_title}/>
                    <RRD.Switch location={location}>
                        <RRD.Route path="/search">
                            <Search/>
                        </RRD.Route>
                        <RRD.Route exact path="/">
                            <RRD.Redirect to="/pages/cover"/>
                        </RRD.Route>
                        <RRD.Route path="/pages/:section">
                            <Page source={props.source}/>
                        </RRD.Route>
                        {/* 兜底路由，无效路径返回空内容 */}
                        <RRD.Route>
                            {null}
                        </RRD.Route>
                    </RRD.Switch>
                </div>
            </div>
        </>
    )
}

// 调整Book组件的返回内容
export default function Book(props) {
    // useEffect逻辑保持不变
    return (
        <RRD.BrowserRouter>
            <RouteContent {...props} />
        </RRD.BrowserRouter>
    )
}

4. 额外排查项 #

• 确认所有路由跳转都使用react-router-dom提供的Link组件或useHistory的push/replace方法，不要使用原生a标签或window.location.href跳转
• 执行npm ls react-router-dom检查项目中是否存在多个版本的react-router-dom，存在多版本会导致路由上下文丢失
• 检查Search组件是否有memo、shouldComponentUpdate等优化逻辑错误阻断重渲染，或者内部有未捕获的JS异常

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