React Router路由使用报错：<Route>必须作为<Routes>的子元素使用

架构老林

2026-4-21

React Router路由使用报错：必须作为的子元素使用

嘿，我明白你现在卡在React Router的路由报错上了，别着急，咱们来捋清楚问题出在哪～

你提到替换了Router为Routes还是报错，大概率是没搞对v6版本的路由结构逻辑。从你的代码来看，你用的是React Router v6的包，但写法还是沿用了旧版本的方式，这才导致了报错。

React Router v6对路由的结构有严格要求：

return (<Route> 不能直接作为 <BrowserRouter>（也就是你代码里的Router）的子元素，必须被 <Routes> 组件包裹
)

不再支持把组件嵌套在标签内部，而是要通过 element 属性来指定要渲染的组件

给你修改好的完整代码，你可以直接替换试试：

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Users from "./users/pages/Users";

const App = () => {
  return (
    <Router>
      {/* 用Routes包裹所有Route组件 */}
      <Routes>
        {/* 通过element属性指定渲染的组件 */}
        <Route path="/" element={<Users />} />
      </Routes>
    </Router>
  );
};

export default App;

简单说下你之前的问题：