使用React Router V6出现空白页问题求助（附代码）

开发者阿泽

2026-8-6

React Router V6 页面空白问题排查与修复

问题原因及修复点：

组件未返回JSX：Routering箭头函数没有返回内容，需用括号包裹JSX或显式声明return。
element属性传入错误：Route的element需传入组件实例（如<Login />），而非组件本身（Login）。
404路由缺少匹配规则：NotFound路由需添加path="*"才能匹配所有未定义路径。
多余的exact属性：React Router V6中Route默认精确匹配，无需exact属性。

修改后的Routering.js代码：

import React from 'react'
import { HashRouter as Router, Routes, Route } from 'react-router-dom';
import App from './components/app.js'
import Login from './components/login.js'
import NotFound from './components/NotFound.js';

const Routering = () => (
    <Router>
        <Routes>
            <Route path="/login" element={<Login />} />
            <Route path="/" element={<App />} />
            <Route path="*" element={<NotFound />} />
        </Routes>
    </Router>
)

export default Routering;