React路由求助：根路由无element属性导致空白页报错

你遇到的问题是因为react-router-dom v6版本的API和v5有重大变化，你的代码用了v6的Routes组件，但仍沿用v5的component属性写法，导致路由无法正确渲染组件。

具体修改点： #

• 把Route的component={Home}替换为element={<Home />}：v6中Route组件不再支持component/render属性，必须通过element传入要渲染的JSX元素
• 移除exact属性：Routes组件下的Route默认就是精确匹配路径，不需要额外声明exact

修改后的完整代码： #

import { Component } from 'react';
import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
import './App.css';

import Home from './component/Home';
import Input from './form';


class App extends Component {
  
  render(){
    return (
      <div className="App">
        <BrowserRouter>
          <Link to="/">Home</Link>

          <Routes>
            <Route path='/' element={<Home />} />
          </Routes>
        </BrowserRouter>
      </div>
    );
  }
  
}

额外检查项： #

• 确认Home组件是默认导出（export default Home），或者在导入时用import { Home } from './component/Home'（如果是命名导出）
• 确保Home组件内部有正常的渲染内容，比如返回一个<div>Home Page</div>之类的元素，避免组件本身为空导致页面空白

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