30

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

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

我的旋转木马的精简版可在此处获得。

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

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

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

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

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

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

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

4

4 回答 4

12

1.0

react-router no longer sets a key on your routes. If you do need to set a key from a route handler, put it on a surrounding element.

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

0.13

It's now <ReactRouter.RouteHandler key="anything" />, but this is also no longer really needed due to changes in react-router. See the changelog for more details.

0.12

Currently, react-router sets a key on your handler based on the current route. When react does its diff, and notices a different key, it throws out the entire subtree both in virtual and real dom, and rerenders.

To prevent this, you can override react-router's key when using activeRouteHandler()

this.props.activeRouteHandler({key: "anything"})
于 2014-10-07T18:32:13.487 回答
11

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

反应路由器 v2.0 rc5

import { hashHistory } from 'react-router'
this.props.location.query.t = key;
hashHistory.replace(this.props.location);
于 2016-01-21T03:21:49.823 回答
5

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

// In your component

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

历史文件

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

export default createHistory();

然后，无论你在哪里声明你的路由器，传递历史道具

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

    <Router history={history}>
      // ... Your component
    </Router>
于 2018-12-24T15:56:59.680 回答
0

反应路由器 v6

JavaScript

如果你真的想用 React Router 来做这个，你可以看看这个 issue中的一些解决方法或者看看下面的 HTML 解决方案。但是，我只建议使用 window 对象。

如果您希望它简单明了，请像这样设置哈希： window.location.hash = '#newHash'.

如果您不想将某些内容推送到历史堆栈，请使用window.location.replace，如下例所示 window.location.replace('#newHash')：

HTML ( <Link>)

如果您只想链接到哈希，并且不需要任何 React Router 功能，请使用锚标记。

如果您只想创建一个<Link to="">元素，您可以设置reloadDocument为 true，如下例所示 <Link reloadDocument to="#test"></Link>：这会跳过客户端路由并让浏览器正常处理转换，因为它是一个锚标记。在此处阅读更多相关信息。确保 React Router 正确呈现to="[this link]"链接！如果您像我一样希望哈希不会被推送到用户的历史记录，您还需要将replace链接元素上的属性设置为 true。但是，如果您有搜索参数，则此解决方案不起作用。

于 2022-02-21T17:46:05.477 回答