React项目使用router时报Route需为Routes子元素错误如何解决

你当前代码存在3个核心问题，直接触发了该报错：

• 导入别名错误：你将BrowserRouter重命名为Routes使用，但React Router v6的规则是：BrowserRouter是提供全局路由上下文的最外层容器，Routes是专门负责路由匹配、包裹Route的内层组件，你代码中写的<Routes>实际是BrowserRouter实例，并非真正的路由匹配容器，内部直接渲染Route自然会触发报错。
• Route属性写法错误：React Router v6中Route组件不再支持component属性传入页面组件，需要使用element属性传入JSX格式的组件节点。
• 路由跳转逻辑错误：你当前通过useState维护视图状态的写法和路由逻辑完全脱节，点击按钮仅修改本地state，不会触发路由路径变更，无法实现路由跳转效果。

1. 修正导入语句，正确引入React Router提供的所需组件
2. 调整组件层级：最外层用BrowserRouter包裹整个路由相关区域，内层嵌套真正的Routes组件，所有Route必须作为Routes的直接子元素
3. 修正Route的属性写法，用element替代component传入要渲染的组件
4. 替换原有本地state控制的跳转逻辑，使用路由官方提供的跳转方式

import About from "./container/About";
import Profile from "./container/Profile";
// 修正导入：正确引入BrowserRouter、Routes、Route、Link
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'

function App(){
  return(
    <div className="App">
      {/* BrowserRouter作为最外层路由上下文容器 */}
      <BrowserRouter>
        {/* 用Link组件实现无刷新路由跳转 */}
        <Link to="/about"><button>About</button></Link>
        <Link to="/profile"><button>Profile</button></Link>
        {/* 真正的Routes组件包裹所有Route */}
        <Routes>
          {/* 用element属性传入JSX格式的组件，补全Profile路由配置 */}
          <Route path="/about" element={<About />}></Route>
          <Route path="/profile" element={<Profile />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  )
}
export default App;

如果需要保留按钮点击的编程式跳转逻辑，可以替换Link为useNavigate钩子实现：

import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom'
function App(){
  const navigate = useNavigate()
  return (
    <div className="App">
      <BrowserRouter>
        <button onClick={()=>navigate('/about')}>About</button>
        <button onClick={()=>navigate('/profile')}>Profile</button>
        <Routes>
          <Route path="/about" element={<About />}></Route>
          <Route path="/profile" element={<Profile />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  )
}

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