React Router参数路由不生效：嵌套路由为何无法正确渲染？

问题场景 #

搭建简易电商网站时，React Router访问带参数的路由localhost:3000/shop/1或localhost:3000/shop/2时，页面只显示<Shop />组件，而非预期的<Item />组件。已找到平级路由的可行方案，但想了解嵌套写法失效的原因。

不生效的嵌套路由写法 #

import { Route, Routes } from 'react-router-dom';
import Home from './pages/Home'
import Shop from './pages/Shop';
import Item from './pages/Item';
import CheckOut from './pages/Checkout';
import NotFound from './pages/NotFound';
import NavBar from './assets/navbar';

function App() {
  return (
    <>
      <Routes>
        <Route element={<NavBar />}>
          <Route path='/' element={<Home />} />
          <Route path='shop/' element={<Shop />}>
            <Route path=':id' element={<Item />} />
          </Route>
          <Route path='*' element={<NotFound />} />
        </Route>
        <Route path='checkout' element={<CheckOut />} />
        <Route path='*' element={<NotFound />} />
      </Routes>
    </>
  )
}

export default App;

注：尝试将path='shop/'改为path='shop'后仍不生效。

生效的平级路由写法 #

import { Route, Routes } from 'react-router-dom';
import Home from './pages/Home'
import Shop from './pages/Shop';
import Item from './pages/Item';
import CheckOut from './pages/Checkout';
import NotFound from './pages/NotFound';
import NavBar from './assets/navbar';

function App() {
  return (
    <>
      <Routes>
        <Route element={<NavBar />}>
          <Route path='/' element={<Home />} />
          <Route path='shop' element={<Shop />} />
          <Route path='shop/:id' element={<Item />} />
          <Route path='*' element={<NotFound />} />
        </Route>
        <Route path='checkout' element={<CheckOut />} />
        <Route path='*' element={<NotFound />} />
      </Routes>
    </>
  )
}

export default App;

原因解析 #

嵌套路由的核心要求 #

React Router v6的嵌套路由机制中，父路由组件必须渲染<Outlet />组件，它是子路由内容的占位容器。当访问嵌套子路由（如shop/:id）时，React Router会将子路由的组件渲染到父组件的<Outlet />位置。

你的<Shop />组件里没有引入并渲染<Outlet />，所以访问shop/:id时，只会显示<Shop />的内容，子路由的<Item />没有挂载位置，自然不会显示。

平级路由生效的原因 #

平级写法里，shop和shop/:id是两个独立路由，各自对应不同组件。当访问shop/:id时，React Router会精确匹配该路由，直接渲染<Item />组件，不需要依赖父组件的<Outlet />。

让嵌套写法正常工作的方法 #

修改<Shop />组件，引入并添加<Outlet />：

// Shop.tsx
import { Outlet } from 'react-router-dom';

function Shop() {
  return (
    <div>
      {/* Shop组件原有内容 */}
      <h2>商品列表页</h2>
      {/* 子路由内容的占位容器 */}
      <Outlet />
    </div>
  );
}

export default Shop;

这样访问shop时显示<Shop />内容，访问shop/:id时，<Shop />会正常渲染，同时<Item />会被插入到<Outlet />位置。

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