如何使用React Router Dom让根路径与子路由显示相同页面？

你的问题在于当前路由配置未处理根路径的默认内容，且子路由路径写法有误，调整方式如下：

方法一：保留嵌套路由结构（适合Products有通用布局的场景） #

修改App组件的路由配置，添加索引路由并修正子路由的相对路径：

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Products />}>
          {/* 索引路由：访问根路径（带/或不带/）时默认渲染ProductDisplay */}
          <Route index element={<ProductDisplay />} />
          {/* 相对路径子路由：匹配/1、/2等带id的路径 */}
          <Route path=":id" element={<ProductDisplay />} />
        </Route>
      </Routes>
    </Router>
  );
}

调整说明： #

1. 修正子路由路径：把子路由的path="/:id"改为path=":id"（去掉前缀/），使其继承父路由的/路径，成为真正的嵌套子路由。
2. 添加索引路由：Route index会在访问父路由（/或/，React Router会自动统一这两种路径）时，让Outlet渲染ProductDisplay，解决根路径空白的问题。

调整后三个路由都会通过Products的Outlet渲染ProductDisplay，实现相同页面的需求。

方法二：直接映射路由（适合无需嵌套布局的场景） #

如果Products组件仅作为容器没有额外内容，可以简化路由配置，直接让三个路径都指向ProductDisplay：

function App() {
  return (
    <Router>
      <Routes>
        {/* 匹配根路径（带/或不带/） */}
        <Route path="/" element={<ProductDisplay />} />
        {/* 匹配带id的路径 */}
        <Route path="/:id" element={<ProductDisplay />} />
      </Routes>
    </Router>
  );
}

React Router会自动处理www.mysite.com和www.mysite.com/的路径等价性，两者都会匹配第一个路由，而www.mysite.com/1匹配第二个路由，最终三个路径都显示ProductDisplay页面。

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