React.js中“<Route>仅能作为<Routes>子元素”错误的修复方法

错误原因 #

你使用的是React Router v6版本，这个版本对路由结构做了强制性调整：

• Route组件不能直接作为Router的子元素，必须嵌套在Routes组件内部；
• 原Route的component属性已被废弃，需要改用element属性传入组件实例。

修复步骤及代码 #

1. 从react-router-dom中导入Routes组件；
2. 用Routes包裹所有Route组件；
3. 将Route的component={App}替换为element={<App />}；
4. 移除冗余的BrowserRouter导入（你当前代码里重复导入了，没必要）。

修复后的完整代码：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router>
      <Routes>
        <Route path="/" element={<App />} />
      </Routes>
    </Router>
  </React.StrictMode>
);

关键变化说明 #

• Routes是v6新增的组件，负责管理路由匹配逻辑，替代了v5中的Switch；
• element属性要求传入JSX元素（比如<App />），而不是组件本身，这是v6的标准写法；
• 移除重复导入的BrowserRouter，让代码更简洁。

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