在同级组件之间导航时，useNavigate 不会加载页面

Question

我正在使用react-router-dom v6开发一个react-js应用程序，

我尝试简化我的框架以使其更清晰。

MainRouter.js

<BrowserRouter>
  <NavBar/>
  <Routes>     
      <Route exact path="/"  element={<HomePage/>}></Route>
      <Route path="item"  element={<ShowItem/>}>
        <Route path=":itemId"  element={<ShowItem/>}>
        </Route>
      </Route>
  </Routes>

导航栏包含一个搜索栏，我可以搜索不同的项目：“item/1”、“item/2”...为了简单起见，我替换了搜索带有一个按钮的栏，该按钮尝试始终重定向到项目 12

NavBsr.js

return (
    [...]
    <button onClick={()=>navigate("/item/12")}>Click</button>
);

如果我位于除“item/*”之外的任何页面，导航将按预期工作。前任。如果我在“主页”，按钮会重定向到“item/12”

但是，如果我当前的页面是“item/*”，例如，会发生奇怪的行为。 “项目/1”。在这种情况下，如果我按下按钮，网址将更改为“item/12”，但内容不会加载：仅当我手动刷新页面时才会加载正确的内容

感谢您的任何建议

Answer 1

ShowItem 组件应该“侦听”itemId 路由参数的更改，以便它可以处理获取数据或运行依赖于该值的任何逻辑。

使用依赖于 itemId 路由参数的 useEffect 挂钩。

例子：

const { itemId } = useParams();

useEffect(() => {
  if (itemId) {
    // handle logic using new itemId value
  }
}, [itemId]);