React Router v6仅主页可渲染，其他路由显示空白页问题

核心现象 #

根路由/使用Home组件时，访问/success、/cancel等其他路由会显示空白；但把这些组件设为根路由，或者根路由换成简单的<h1>时，所有路由都能正常工作。

排查步骤&解决办法 #

1. 先看浏览器控制台的错误信息 #

打开F12开发者工具的「控制台」标签，切换到空白的路由页面，查看红色报错信息——这是最直接的问题线索。常见报错场景：

• 某个子组件在非根路由下渲染时，找不到依赖或资源
• 状态初始化错误、useEffect逻辑报错
• 路由相关API使用不当

2. 检查资源引用路径 #

如果是Create React App搭建的项目，注意静态资源的路径写法：

• CSS文件里引用图片、字体等资源时，别用相对路径（比如./logo.png），改成绝对路径（比如/logo.png，资源需放在public文件夹下）。
• 路由不在根路径时，相对路径会被浏览器解析成/success/logo.png这类不存在的路径，导致资源加载失败，严重时会引发组件渲染错误，出现空白。

3. 定位问题子组件 #

逐个注释Home组件里的子组件，测试路由是否恢复正常，快速定位出问题的组件：

function Home() {
    const [buyTab, setBuyTab] = useState(false);
    return (
        <div className='main'>
            {/* 先注释所有子组件，逐步恢复排查 */}
            {/* <NavBar setBuyTab={setBuyTab} buyTab={buyTab}/> */}
            {/* <Header setBuyTab={setBuyTab} buyTab={buyTab}/> */}
            {/* <Image/> */}
            {/* <Introduction /> */}
            {/* <DescriptionCarousel /> */}
            {/* <Video /> */}
        </div>
    );
}

重点检查这类组件：

• NavBar/Header：有没有用普通<a>标签跳转路由？必须用react-router-dom的<Link>组件，否则会触发页面刷新，导致SPA路由失效。
• 有没有组件在挂载时强制跳转到根路径（比如用useNavigate执行navigate('/')）？这种逻辑会直接阻断其他路由的渲染。
• 子组件是否存在无限循环渲染（比如useState更新依赖错误）？会导致React卡死，无法渲染新路由。

4. 确认React Router使用正确性 #

虽然你的路由配置写法符合v6规范，但再确认两点：

• 所有路由组件（Success、Cancel等）本身无语法错误，能独立正常渲染。
• 没有混用v5的API（比如误写Switch而非Routes，component而非element）。

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