如果替换路径中的最后一个元素，React Router v6 useNavigate() 不会导航

Question

我有一个具有以下功能的反应组件

    const handleNavigate = (clientId) => {
        console.log(clientId)
        navigate(`/dashboard/clients/${clientId}`)
    }

console.log() 显示了我要附加以用于导航功能的 ID。

和

浏览器中的 URL 正在 更新。

但是页面没有变化。

这适用于从 /dashboard/clients 导航到 /dashboard/clients/foo

但它无法从 /dashboard/clients/foo 导航到 /dashboard/clients/bar

clientId 像这样传递到卡中……

 const CompanyCard = (props) => {
    const { client, showWatchlist, removeDisabled, showRemove, removeType } = props
...
}

然后在卡片中

                <CardActionArea
                    onClick={() => handleNavigate(client._id)}
                 ...

有任何想法吗？

谢谢

更新

在阅读了@redapollos 的建议后，我尝试了 Outlet 和

useRoutes 方法…都不起作用。

 import { useRoutes } from 'react-router-dom'

// then in the routes...

        { path: 'clientdetail/:id', element: <ClientDetail /> },
        { path: 'clientdetail/', element: <ClientDetail /> },

这可能是由于使用了 useRoutes 钩子，但我仍在努力。

关于 SO 的另一个问题可能会更快得到答案 - https://stackoverflow.com/a/70009104/13078911

原文由 Ax0n 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我刚刚在 React Router Dom Docs v6 中阅读了这个解决方案：

 import { useNavigate } from 'react-router-dom';
...
const navigate = useNavigate();
...
<Button onClick={() => navigate('../user', { replace: true })}>Register</Button>

所以，基本上我在路线和 —999 ../ 之前添加了 replace: true 。

参考： https ://reactrouter.com/docs/en/v6/hooks/use-navigate

它对我有用，希望它对你有用！ (:

原文由 Panda 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

可行的解决方案！

 navigate('/url')
navigate(0)

替换url后，手动调用 navigate(0) 会自动刷新页面！

这将适用于从 /same_path/foo 导航到 /same_path/bar 的情况。

注意意外的页面引用行为：

对于正常情况，例如从 /home 导航到 /same_path/bar ， navigate(0) 将导致页面刷新，即使页面已完成。为了防止这种情况，你可以看看 这个问题。

更多信息：

1. 使用导航文档

2. 如何使用 react-router 重新加载页面？

原文由 Enfield li 发布，翻译遵循 CC BY-SA 4.0 许可协议