URL 正在更改，但组件未渲染

Question

在我正在开发的一个项目中，当我尝试通过搜索栏从类别页面或类别页面导航到产品页面时，产品组件已成功呈现，但是当我从产品页面导航到另一个产品页面时，URL 正在被渲染按预期更改，但没有渲染任何内容。（我尝试将react-router-dom的版本更改为最新版本，但它不起作用）。 这是我的路线文件：

<BrowserRouter>
  <Routes>
    <Route path="/home/categories">
      <Route path=":category" element={<category></category>}>
        <Route path=":product" element={<product></product>}></Route>
      </Route>
    </Route>
  </Routes>
</BrowserRouter>

这是搜索栏导航组件：

<NavLink to={``/home/categories/${product.category}/${product.id}``}>{product.name}</NavLink> 

Answer 1

您有相同的路径

:category

和

:product

。它们是动态参数，它们不是路径

/home/categories/...

之后的任何内容都会与第一条路线匹配，即

<Route path=':category' element={<category></category>>

如果您需要路径

/home/categories/category

和

/home/categories/product

，请删除嵌套路径前面的

:

符号