如果替换路径中的最后一个元素，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钩子，但我仍在努力。

这里的另一个问题可能会更快得到答案 - /sf/answers/4900637311/

Answer 1

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

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

所以，基本上我../在路线和replace: true.
参考： https: //reactrouter.com/en/6.9.0/hooks/use-navigate

它对我有用，希望对你有用！（：

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重新加载页面？