使用React Router DOM时页面空白的问题求助

问题根源梳理 #

• 路由未按v6规范嵌套：React Router v6 强制要求所有 <Route> 必须包裹在 <Routes>（替代旧版 Switch）组件内部，否则路由规则不会被识别。
• Route的element属性传值错误：element 需要传入组件的JSX实例（如 <HelloWorld />），而非组件本身（HelloWorld）。
• 跳转路径与路由规则不匹配：Home组件中Link的跳转目标是 /testHome，但Route定义的路径是 /notes，点击后无法匹配到目标组件。
• 组件命名与导入名不一致：HelloWorld.js导出的是 MyComponent，但App.js中导入为 HelloWorld，虽不影响运行，但易引发混淆。

修正后的代码 #

App.js

import React from 'react';
import HelloWorld from './HelloWorld';
// 新增导入Routes组件
import { HashRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';

function App() {
  return (
    <Router>
      <Home />
      {/* 用Routes包裹所有Route规则 */}
      <Routes>
        {/* element传入JSX实例，而非组件引用 */}
        <Route path="/notes" exact element={<HelloWorld />} />
      </Routes>
    </Router>
  );
}

export default App;

Home.js

import React from 'react';
import { Link } from 'react-router-dom';

function Home() {
  return (
    <div>
      {/* 修正跳转路径与Route定义一致 */}
      <Link to="/notes" style={{ color: 'blue', fontSize: '20px' }}>
        Go to Notes
      </Link>
    </div>
  );
}

export default Home;

可选：统一HelloWorld.js命名（减少混淆）

import React from 'react';

// 组件名与导入名统一为HelloWorld
function HelloWorld() {
  return (
    <div>
      <h1>Hello world</h1>
    </div>
  );
}

export default HelloWorld;

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