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

Question

我正在使用react路由器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>

导航栏包括一个搜索栏s.t。我可以搜索不同的项目："；项目/1"项目/2"。。。为了简洁起见，我将搜索栏替换为一个按钮，该按钮试图始终重定向到项目12

NavBsr.js

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

如果我在除"；项目/*"；，导航工作正常。例如，如果我在"；主页"；，按钮重定向到"；项目/12"；

然而，如果我的当前页面是"；项目/*"；，例如"；项目/1"；。在这种情况下，如果我按下按钮，url将变为"；项目/12"；但是内容没有加载：只有当我手动刷新页面时，才会加载正确的内容

感谢的任何建议

Answer 1

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

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

示例：

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