Typescript react 路由不响应参数

我一直在考虑其他一些线索，但还没有找到帮助我的答案.我正在建立一个非常简单的Electron 商务网站.路由一直工作得很好，直到我到达类似"localhost:3000/shop/1"或"localhost:3000/shop/2"的路由，在那里它继续显示我应该只在"localhost:3000/shop"路由上看到的<Shop />元素，而不是<Item />元素.虽然我已经找到了一种变通方法，但我感到困惑的是，为什么只有该变通方法才是有效的，并且我很想看看是否有方法可以让它在我格式化它的第一种方式下工作.

以下是不起作用的方法:

App.tsx

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;

我试着将<Route path='shop/' element={<Shop />}>改为<Route path='shop' element={<Shop />}>，但功能上仍然没有任何变化.

以下是有效的方法:

App.tsx

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;

为什么一种方法有效，另一种不起作用，有什么原因吗？