时间戳

首页 > 解决方案 > React：更改 url 而不重新渲染；使用window.history？

javascript - React：更改 url 而不重新渲染；使用window.history？

问题描述

我的反应应用程序中有一个“设置”页面。该页面有几个选项卡呈现设置的不同部分。

如果用户可以与其他用户共享 url，那将是更好的用户体验。

我想要的是（在“设置”页面内）：

  1. 用户 A 单击选项卡
  2. url 更改并#tabname附加
  3. 用户 A 将该 URL 发送给用户 B，用户 B 打开该 URL
  4. 用户 B 看到与用户 A 相同的选项卡

但是使用 react 路由器，如果 url 发生变化，整个页面会重新呈现：

import { withRouter } from "react-router-dom"

const MyComp = (props) => {
  ...

  const onTabChange = () => {
    // append #tabname here
    props.history.replace(...); // or `push`
    ...
  }

  ...

export default withRouter(MyComp)
}

经过大量搜索，我找到了使用的解决方案window.history：

  const onTabChange = () => {
    window.history.pushState(null, null, "#tabname");
    ...
  }

这可以解决问题，但信息和解释很少，我很想知道使用这个技巧的后果。

这是一个有效的解决方案（对于一个反应应用程序）？这会导致任何问题吗？

（PS。我知道如何解析一个网址）

更多详情：

更具体地说，AuthChecker所有页面都有一个包装器。当响应路由器的location更改时，它会检查路由允许的身份验证和当前用户的身份验证。

我试过/path/:id了，但一切都变了location，所以检查了身份验证并重新渲染了页面。

而且我已经放弃了反应路由器中的解决方案，只是想知道window.history：在使用反应路由器管理路由的反应应用程序中更改 url 是否安全？

标签： javascriptreactjs

解决方案

这个问题已经在这篇文章中得到了回答。

所以它说 window 有一个名为 history 的属性，并且有一个关于历史的方法可以帮助您更新历史状态，而无需 react-router-dom 理解它。

像这样：

window.history.replaceState(null, 'New Page Title', '/new_url');

推荐阅读