React 路由器 - 更新 URL 哈希而不重新渲染页面

Posted 2023-02-21

【中文标题】React 路由器 - 更新 URL 哈希而不重新渲染页面

【英文标题】：React router - Update URL hash without re-rendering page

【发布时间】：2014-12-02 01:34:53

【问题描述】：

使用react-router 我正在寻找一种方法来更新页面 URL / 哈希，而无需路由器重新呈现整个页面。

我正在开发一个整页轮播，并希望每张幻灯片都有自己的 URL（允许用户刷新页面并返回到正确的幻灯片）。轮播稍后会有类似于this demo 的滑动，这意味着下一张幻灯片已预渲染。

我的旋转木马的精简版可用here。

当前幻灯片更改如下所示：

onClickLeft: function() 
  this.setState(
    selected: this.state.selected - 1
  );

这工作正常，没有 URL 更新。我真正想要的是：

mixin: [Navigation],
onClickLeft: function() 
  this.transitionTo('carousel-slide', num: this.state.selected + 1);

这将设置当前幻灯片的道具，允许轮播动画。但是现在使用此方法会导致页面重新渲染并且不显示动画。

我看到ReactCSSTransitionGroup 用于路由转换，但这似乎是为了呈现新页面并转换旧页面。

如果已经有一种方法可以实现我正在寻找的东西，但我错过了，有人能指出我正确的方向吗？

【问题讨论】：

尝试在您的处理程序中将this.props.activeRouteHandler() 更改为this.props.activeRouteHandler(key: "test")。这有帮助吗？

虽然我不知道为什么，但这有效！我不得不将它与componentWillReceiveProps 结合起来以捕捉更新的道具并调用setState，但仍然非常棒！想要将此作为答案添加以便我接受吗？

这只是一种预感，我没有时间去测试它。下面回答:-)

在底部查看我对react router v4的回答。

【参考方案1】：

1.0

react-router 不再在你的路由上设置一个键。如果您确实需要从路由处理程序中设置键，请将其放在周围元素上。

return (
  <div key=this.props.params.bookId>
    this.props.children
  </div>
);

0.13

现在是 <ReactRouter.RouteHandler key="anything" />，但由于 react-router 的变化，它也不再需要。有关详细信息，请参阅更改日志。

0.12

目前，react-router 根据当前路由在您的处理程序上设置一个键。当 react 进行 diff 并注意到不同的键时，它会抛出虚拟和真实 dom 中的整个子树，并重新渲染。

为了防止这种情况，您可以在使用 activeRouteHandler() 时覆盖 react-router 的键

this.props.activeRouteHandler(key: "anything")

【讨论】：

@FakeRainBrigand 从更新日志中不清楚，现在如何在 React Router 与 1.0.0 中使用新的历史模块来完成此任务。您是否有机会更新此内容或为我指明正确的方向？

【参考方案2】：

使用 react-router 很痛苦，因为它涉及到每个主要和次要版本中的重大更改

React Router v2.0 rc5

import  hashHistory  from 'react-router'
this.props.location.query.t = key;
hashHistory.replace(this.props.location);

【讨论】：

@Kousha, hashHistory 用于在# 之后 的URL 上设置的路径。 browserHistory 用于非散列 URL，如您的起始示例。

v 4.0 有什么办法吗？或更高

检查我对 v4 的回答

【参考方案3】：

对于 React router v4，您需要使用 history 并将其作为 prop 传递给 Router。然后Router 会将history 对象作为道具传递给您的组件，您可以像这样使用它：

// In your component

this.props.history.push("#testing")

历史档案

// history.js 
import createHistory from "history/createBrowserHistory";

export default createHistory();

然后，无论你在哪里声明你的路由器，都传递 history 属性

import history from "./history";
import  Router  from "react-router-dom";

    <Router history=history>
      // ... Your component
    </Router>

【讨论】：

你知道如何在 v5 中进行这项工作吗？我在控制台中得到这个：“警告：请使用require("history").createBrowserHistory 而不是require("history/createBrowserHistory")。对后者的支持将在下一个主要版本中删除。”我尝试了这个建议，但它破坏了网站。

在 v5 中修改历史记录也会重新渲染页面。