javascript Link(react-router-dom)to same location with state [duplicate]

kyxcudwk 于 2024-01-05 发布在 Java

关注(0)|答案(1)|浏览(118)

此问题在此处已有答案：

React router v6 programmatically redirect（2个答案）
2天前关闭。
考虑这样的链接：<Link to={/samelocation/${id}} state={{ state1: 'hello' }}>
该链接位于/samelocation/:id处的主组件（元素）的子组件中。为了测试状态是否正确传递，我添加了以下行：

const location = useLocation()
console.log(location.state?.state1 || null)

字符串
实际上，我看到hello正在登录到控制台。
问题是，由于它转到相同的位置，它不会刷新页面。为了解决这个问题，我添加了reloadDocument到链接：<Link reloadDocument to={/samelocation/${id}} state={{ state1: 'hello' }}>。
但是，现在我的状态没有按预期传递，我将null记录到控制台。
我在App.js中的路由看起来像这样：

<Routes>
    <Route path='/samelocation/:id' element={<ConsoleLogPage />} />
</Routes>

型
有没有一种方法可以告诉<Routes>或<Link>将每个具有不同:id的/samelocation/:id-路由视为一个完全独立的新页面并像这样处理它？

JavaScript

来源：https://stackoverflow.com/questions/77746652/link-react-router-dom-to-same-location-with-state

1条答案

按热度按时间

1dkrff031#

如果您想在：id更改时强制重新挂载组件，可以在App.js中的元素上使用key prop。key prop允许您为组件的每个示例指定唯一标识符，更改它将强制重新挂载。

function App() {
  return (
    <Routes>
      <Route
        path='/samelocation/:id'
        element={<ConsoleLogPage />}
        key={(route) => route.params.id}
      />
    </Routes>
  );
}

个字符

赞(0）回复(0）举报 2024-01-05

我来回答

javascript Link(react-router-dom)to same location with state [duplicate]

1条答案

相关问题

热门标签

最新问答