在兄弟组件之间导航时，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>

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

NavBsr.js

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

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

但是，如果我的当前页面是“item/*”，就会出现奇怪的行为，例如。 “item/1”。在这种情况下，如果我按下按钮，url 会更改为“item/12”，但内容不会加载：只有在我手动刷新页面时才会加载正确的内容

感谢任何建议

Answer 1

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

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

示例：

const { itemId } = useParams();

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

在兄弟组件之间导航时，useNavigate 不加载页面

useNavigate doesn't load page when navigating between siblings component

navigation

reactjs

react-router-dom