React Router v6报错：section不是<Route>组件，请求协助

错误原因 #

react-router-dom v6 严格要求 <Routes> 的直接子节点必须是 <Route> 组件，不能嵌套 <section> 这类普通HTML元素，这就是你遇到报错的核心原因。另外你的代码里还有两个小问题：

• <Route> 的 exact 属性在v6中已被移除，默认就是精确匹配
• element 属性需要传入JSX元素（如 <Register />），而非组件本身（Register）

解决方案 #

方案一：将容器直接包裹在组件外层 #

把 <section className='container'> 直接放到对应路由的 element 属性里，确保 <Routes> 的子节点只有 <Route>：

function App() {
  return (
    <Router>
      <Fragment>
        <Navbar />
        <Routes>
          <Route path='/' element={<Landing />} />
          <Route path='/register' element={<section className='container'><Register /></section>} />
          <Route path='/login' element={<section className='container'><Login /></section>} />
        </Routes>
      </Fragment>
    </Router>
  );
}

方案二：使用嵌套路由+布局组件（更优雅） #

如果有多个页面需要用到这个容器，可以创建一个布局组件，通过嵌套路由复用容器结构：

1. 先定义布局组件，用 <Outlet> 渲染子路由内容：

import { Outlet } from 'react-router-dom';

function ContainerLayout() {
  return (
    <section className='container'>
      <Outlet /> {/* 这里会渲染匹配的子路由组件 */}
    </section>
  );
}

2. 在App中配置嵌套路由：

function App() {
  return (
    <Router>
      <Fragment>
        <Navbar />
        <Routes>
          <Route path='/' element={<Landing />} />
          {/* 布局路由，所有子路由都会使用这个容器 */}
          <Route element={<ContainerLayout />}>
            <Route path='/register' element={<Register />} />
            <Route path='/login' element={<Login />} />
          </Route>
        </Routes>
      </Fragment>
    </Router>
  );
}

内容的提问来源于stack exchange，提问作者Krishnadev. V