React Router报“只能有一个子元素”错误，请求排查代码问题

return (<Router/>)

嘿，我帮你找到问题所在了！你用的是最新版的react-router-dom（v6），但代码还是沿用了v5及更早版本的写法，这就是报错的核心原因。

问题分析 #

在react-router-dom v6中，有两个关键的语法变化你没注意到：

1. 所有<Route>组件必须被<Routes>组件包裹，不能直接放在<div>或其他普通元素里
2. <Route>的component属性已经被废弃，改用element属性来传入组件实例（比如<MarketPlace />而不是MarketPlace）

你的代码里虽然给<Router>套了一个<div>，但里面的<Route>没有被<Routes>包裹，v6的路由系统会把这些未被包裹的<Route>识别为<Router>的直接子元素，从而触发“只能有一个子元素”的报错。

修改后的代码示例 #

routes.js

import React from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import MarketPlace from "./MarketPlace";
import Favourites from "./Favourites";

// 组件名首字母大写，符合React规范
const AppRoutes = () => {
  return (
    <Router>
      {/* 用Routes包裹所有Route */}
      <Routes>
        {/* 改用element属性，传入组件实例 */}
        <Route path="/" element={<MarketPlace />} />
        <Route path="/Favourites" element={<Favourites />} />
      </Routes>
    </Router>
  )
}

export default AppRoutes

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import AppRoutes from "./routes.js"

// 用组件标签的方式渲染，而不是直接调用函数
ReactDOM.render(<AppRoutes />, document.getElementById('root'));
registerServiceWorker();

额外说明 #

• 我把组件名改成了AppRoutes（首字母大写），这是React组件的命名规范，避免和原生HTML标签混淆
• v6中不再需要exact属性，因为路由匹配默认就是精确匹配的，除非你用*通配符

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