React Router v6路由嵌套div导致空白页问题求助

问题原因 #

React Router v6的<Routes>组件要求直接子元素必须是<Route>或<React.Fragment>，不能是普通的<div>这类元素。你把<div className="container">放在<Routes>内部包裹Route，违反了这个规则，所以会抛出[div] is not a <Route> component的错误，同时导致组件无法渲染，页面空白。

解决方案 #

提供两种可行的修改方式：

方式一：将container容器移到Route的element中 #

把需要加样式的container直接放到Register和Login组件内部，或者在Route的element里用div包裹组件：

修改App.js的Routes部分：

<Routes>
  <Route path="/" element={<Landing />} />
  <Route path="/register" element={<div className="container"><Register /></div>} />
  <Route path="/login" element={<div className="container"><Login /></div>} />
</Routes>

如果多个路由都需要这个容器，也可以封装一个共用的布局组件：

// 新建Layout组件
function ContainerLayout({ children }) {
  return <div className="container">{children}</div>;
}

// 在App.js中使用
<Routes>
  <Route path="/" element={<Landing />} />
  <Route path="/register" element={<ContainerLayout><Register /></ContainerLayout>} />
  <Route path="/login" element={<ContainerLayout><Login /></ContainerLayout>} />
</Routes>

方式二：使用嵌套路由+Outlet #

如果希望统一给某一组路由添加容器，可以用嵌套路由的方式，把container作为父路由的element，子路由通过Outlet渲染：

修改App.js：

<Routes>
  <Route path="/" element={<Landing />} />
  {/* 父路由提供容器布局 */}
  <Route element={<div className="container"><Outlet /></div>}>
    <Route path="/register" element={<Register />} />
    <Route path="/login" element={<Login />} />
  </Route>
</Routes>

这种方式的好处是不用给每个子路由单独加容器，适合多个路由需要相同布局的场景。

额外注意 #

你的Register和Login组件里导入了<Outlet>但没用到，这部分可以删掉，避免不必要的代码：

// Register.js和Login.js中删除这一行
import {Outlet} from 'react-router-dom';

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