添加Routes组件后React页面空白，请求排查路由配置问题

架构老林

2026-7-10

React路由配置后白屏问题排查与修复

你的代码里存在几个React Router v6的使用错误，导致页面白屏，具体问题和修复方案如下：

1. Route组件API使用错误

React Router v6彻底修改了Route的写法：

不再支持大写的Component属性，需要改用小写的element，并且传入JSX元素（比如<Filter />，而不是组件本身）
Routes组件下的Route默认就是精确匹配，exact属性已经被移除，不需要再写

2. 路由组件嵌套逻辑错误

你的Routers组件已经封装了完整的Router和Routes结构，但在index.js里给Routers传递了子元素（<Route><App/></Route>），但Routers组件并没有接收并渲染这些子元素的逻辑，导致App组件根本不会被渲染。

3. 路径匹配缺失

当前只配置了/index路径的路由，如果访问默认的根路径/，没有对应的路由匹配，页面就会显示空白。

修复后的代码示例

路由文件（比如Route.js）

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Filter from './pages/filter';
import App from './App';

export const Routers = () => {
    return (
        <Router>
            <Routes>
                {/* 根路径匹配App组件 */}
                <Route path='/' element={<App />} />
                {/* /index路径匹配Filter组件 */}
                <Route path='/index' element={<Filter />} />
            </Routes>
        </Router>
    )
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.css';
import { Routers } from './Route';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Routers />
  </React.StrictMode>
);