React Router嵌套路由添加后DOM不渲染的原因及解决疑惑

我尝试在应用中添加可与父路由一同渲染的嵌套路由，但添加后整个文档消失，所有路由页面均显示空白。删除该嵌套路由代码后，页面恢复正常。我的代码如下：

import React from "react"
import {BrowserRouter, Routes, Route, Outlet} from "react-router-dom"

function Foo(){
  return(
    <div>
      <h1>This is the parent</h1>
      <Outlet />
    </div>
  )
}

function Child(){
  return(
    <div>
      <p>This is the nested route</p>
    </div>
  )
}

function App(){
  return(
    <div>
      <BrowserRouter>
        <Routes>
          <Route path='/parent' element={<Foo />}>
            <Route path='/' element={<Child />}/>
          </Route>
          {/*Additional Routes and stuff*/}
        </Routes>
      </BrowserRouter>
    </div>
  )
}

后来我意外将嵌套路由的path从'/'改为''，即<Route path='' element={<Child />}/>，页面恢复正常。但我疑惑为何这样可行，因为参考的React Router教程都使用'/'作为嵌套路由的path。

原因分析与解答 #

这是React Router v6的路由匹配规则导致的，核心是绝对路径和相对路径的严格区分：

• 当嵌套路由写path='/'时，这个路径是绝对路径，只会匹配根路径/，不会和父路由/parent拼接。此时访问/parent，父组件<Foo />会渲染，但<Outlet />里没有匹配的子路由内容；如果你的应用没定义根路径/的路由，整个页面就会因为没有匹配到有效路由而空白。

• 改成path=''后，这是相对路径，会自动拼接父路由的路径，最终匹配/parent。访问/parent时，父组件和子组件会通过<Outlet />一起渲染，页面就正常了。

你看到的教程用/作为嵌套路由path，应该是针对React Router v5及更早版本——v5里嵌套路由的path='/'会被当作相对路径处理，自动拼接父路由路径，但v6重构了路由逻辑，严格区分两种路径，规则就变了。

在v6里实现父路由默认渲染子组件，推荐两种写法：

• 用空字符串''作为子路由path（就是你试出来的方法）
• 用index属性：<Route index element={<Child />}/>，语义更明确，专门用来标记父路由的默认子路由。

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