如果替换路径中的最后一个元素，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

Answer 1

尝试替换 URL 而不是添加新 URL。 当您从/dashboard/clients转到/dashboard/clients/foo时，您将从父母转到孩子，您的 URL 包含所有内容以及/foo 。 但是，当您从/dashboard/clients/foo转到/dashboard/clients/bar时，您正在导航到可能导致问题的兄弟/foo到/bar 。 尝试替换像navigate(/dashboard/clients/ba, {replace: true})这样的值，这是一般如何使用它的示例。 使用它来获取更多信息。 https://www.digitalocean.com/community/tutorials/react-react-router-v6

Answer 2

我遇到了同样的问题，我的代码很好，但是，我在这篇文章中发现 v6 不支持可选参数。
https://github.com/remix-run/react-router/issues/7285

我有：

<Routes>
  <Route path="list/:id?" element={<SystemList />} />
</Routes>

并不得不将其更改为：

<Routes>
  <Route path="list/:id" element={<SystemList />} />
  <Route path="list/" element={<SystemList />} />
</Routes>

我希望他们将来支持它，但从 v6.0.2 开始，他们不支持。

Answer 3

可行的解决方案！

navigate('/url')
navigate(0)

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

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

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

对于像从/home导航到/same_path/bar这样的正常情况，即使页面完成渲染， navigate(0)也会导致页面刷新。 为了防止这种情况，你可以看看这个问题。

更多信息：

1. 使用导航文档

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

Answer 4

也许尝试组件导航：

<Navigate to={<your_path>}/>

Answer 5

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

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

所以，基本上我在 route 和replace: true之前添加了../ 。
参考： https ://reactrouter.com/docs/en/v6/hooks/use-navigate

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

Answer 6

我认为这是一个更好的解决方法。

import React from 'react' 
import { useHistory } from 'react-router-dom' 
... 

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

确保您的应用程序包含在来自react-router-dom的BrowserRouter中

Answer 7

尝试将窗口位置作为关键道具添加到路由中的元素

IE

<Route path=":id" element={ <Hello key={window.location.pathname} } />

Answer 8

基于这个链接https://github.com/remix-run/react-router/issues/8245我可以解决这个问题。

我想因为没有任何改变，所以屏幕没有更新。 一旦我在目标路由组件上添加了 useEffect 并将 lastelement 作为参数传递它就可以了。

换句话说：在目标组件上添加：Reac.useEffect(....) [lastElement]。

Answer 9

这可能有点晚了，但我遇到了同样的问题，您只需触发组件的重新渲染。 您可以通过在您已分配/dashboard/clients/:clientId的组件中添加一个 useEffect 挂钩来执行此操作，并具有您要更新的参数的依赖项。

它应该看起来像这样：

import React, { useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom';


const ClientDashboard = () => {

    const params = useParams()
    const navigate = useNavigate()

    useEffect(() => {
    //do something with new id 
    },[params.clientId])

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

    .....
}

您的页面现在应该使用新参数更新