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

Question

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

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

console.log() 显示了我要附加以在导航功能中使用的 ID。
和
浏览器中的网址 是 更新。
但是页面没有变化。
这适用于从 /dashboard/clients 导航至 /dashboard/clients/foo但从 /dashboard/clients/foo 导航不起作用至 /dashboard/clients/barclientId 像这样传递到卡中......

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钩子(Hook)，但我仍在努力。
SO上的另一个问题可能会很快得到答案-
https://stackoverflow.com/a/70009104/13078911

Answer 1

可行的解决方案!

navigate('/url')
navigate(0)

替换url后，手动调用 navigate(0)会自动刷新页面!
这将在类似的情况下工作
从 /same_path/foo 导航至 /same_path/bar .
请注意意外的页面引用行为:
对于正常情况，例如从 /home 导航至 /same_path/bar , navigate(0)即使页面完成渲染，也会导致页面刷新。为了防止这种情况，您可以查看 this question .
更多信息:

useNavigate docs

How do I reload a page with react-router?