React路由报错：<Route>需嵌套于<Routes>，求修复方案

已执行npm install react-router-dom安装依赖，但运行时出现如下报错：

Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a

以下是当前的App.js和index.js代码，需要修改哪些内容才能正常运行？

App.js #

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const Home = () => {
  return (
    <div>
      <p>Home</p>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <p>About</p>
    </div>
  );
};

const Contact = () => {
  return (
    <div>
      <p>Contact</p>
    </div>
  );
};
class App extends Component {
  render() {
    return (
        <Router>
              <div>
              <h1>W3Adda - Simple SPA</h1>
                <nav>
                  <ul>
                    <li>
                      <Link to="/">Home</Link>
                    </li>
                    <li>
                      <Link to="/about">About</Link>
                    </li>
                    <li>
                      <Link to="/contact">Users</Link>
                    </li>
                  </ul>
                </nav>

                <Route path="/" exact component={Home} />
                <Route path="/about" component={About} />
                <Route path="/contact" component={Contact} />
              </div>
        </Router>
    );
  }
}

export default App;

index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

报错原因是安装的是react-router-dom v6版本，该版本路由语法与旧版差异较大，需做以下修改：

1. 调整App.js的路由结构与语法 #

• 从react-router-dom中新增导入Routes组件
• 将所有<Route>标签统一包裹在<Routes>内部
• 把Route的component属性替换为element，传入对应组件的JSX实例（如element={<Home />}）
• v6版本默认精确匹配路径，无需再添加exact属性

修改后的App.js代码如下：

import React, { Component } from 'react';
// 新增导入Routes组件
import { BrowserRouter as Router, Route, Link, Routes } from "react-router-dom";

const Home = () => {
  return (
    <div>
      <p>Home</p>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <p>About</p>
    </div>
  );
};

const Contact = () => {
  return (
    <div>
      <p>Contact</p>
    </div>
  );
};
class App extends Component {
  render() {
    return (
        <Router>
              <div>
              <h1>W3Adda - Simple SPA</h1>
                <nav>
                  <ul>
                    <li>
                      <Link to="/">Home</Link>
                    </li>
                    <li>
                      <Link to="/about">About</Link>
                    </li>
                    <li>
                      <Link to="/contact">Users</Link>
                    </li>
                  </ul>
                </nav>

                {/* 用Routes包裹所有Route组件 */}
                <Routes>
                  {/* 替换component属性为element，移除exact */}
                  <Route path="/" element={<Home />} />
                  <Route path="/about" element={<About />} />
                  <Route path="/contact" element={<Contact />} />
                </Routes>
              </div>
        </Router>
    );
  }
}

export default App;

2. index.js无需修改 #

你的index.js虽导入了BrowserRouter但未使用，不过App.js已通过BrowserRouter as Router完成根组件包裹，这部分保持原样即可。

修改完成后重新启动项目，报错即可消除，路由功能正常运行。

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