React Router嵌套路由访问/signUp页面无内容问题及解决方案

问题复现 #

浏览器地址栏直接输入/signUp路径访问注册页面时，页面无任何内容渲染，无法正常加载，初始路由配置如下：

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route  element={<AuthLayout />}>
        <Route path="signIn" element={<SignIn />} />
        <Route path="signUp" element={<SignUp />} />
    </Route>
  </Routes>
</BrowserRouter>

根因定位 #

该问题是嵌套路由配置遗漏导致：React Router v6 版本中，作为父级布局的路由组件，必须提供子路由渲染出口，否则匹配到的子路由元素没有挂载位置，不会被渲染到页面上。上述配置里父级布局组件AuthLayout没有添加对应的子路由出口，因此访问子路径时只会加载AuthLayout本身，如果AuthLayout本身没有返回任何可见DOM结构，就会表现为页面完全空白。

修复步骤 #

• 在AuthLayout组件文件中，从react-router-dom引入内置的Outlet组件，该组件的作用就是标记子路由的渲染位置：

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

• 在AuthLayout的JSX结构中，将<Outlet />放置到需要渲染子页面的位置，参考示例：

const AuthLayout = () => {
  return (
    <div className="auth-page">
      {/* 此处可以放登录/注册页公共的头部、侧边宣传区、统一表单容器样式等公共布局内容 */}
      <div className="auth-content">
        {/* 匹配到的SignIn、SignUp组件会自动渲染到Outlet所在位置 */}
        <Outlet />
      </div>
    </div>
  )
}

export default AuthLayout

修改完成后重启服务，再访问/signIn、/signUp路径即可正常渲染对应页面。

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