web-dev-qa-db-fra.com

Réagir le routeur - Mettre à jour le hachage de l'URL sans refaire le rendu

Utilisation de react-router Je cherche un moyen de mettre à jour l'URL de la page/le hachage, sans que le routeur ne restitue la page entière.

Je développe actuellement un carrousel de pages complètes et j'aimerais que chaque diapositive ait sa propre URL (permettant à l'utilisateur d'actualiser la page et de revenir à la diapositive correcte). Le carrousel aura plus tard un balayage similaire à cette démo , ce qui signifie que la diapositive next est déjà rendue.

Une version allégée de mon carrousel est disponible ici .

Le changement de diapositive actuel ressemble à ceci:

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

Cela fonctionne bien, sans mises à jour d'URL. Ce que je veux vraiment, c'est:

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

Cela réglerait l'accessoire de la diapositive actuelle, permettant ainsi au carrousel de s'animer. Cependant, l'utilisation de cette méthode entraîne désormais le rendu de la page et aucune animation n'est affichée.

J'ai vu la ReactCSSTransitionGroup utilisée pour les transitions d'itinéraire, mais elle semble orientée vers le rendu d'une nouvelle page et la transition de l'ancienne.

S'il existe déjà un moyen de réaliser ce que je recherche et que je l'ai raté, quelqu'un pourrait-il m'orienter dans la bonne direction?

reactjsreact-router
19
Ashley 'CptLemming' Wilson

1,0

react-router ne définit plus de clé sur vos itinéraires. Si vous devez définir une clé à partir d'un gestionnaire d'itinéraire, placez-la sur un élément environnant.

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

0,13

C'est maintenant <ReactRouter.RouteHandler key="anything" />, mais ce n'est plus vraiment nécessaire en raison des modifications apportées à react-router. Voir le changelog pour plus de détails.

0,12

Actuellement, react-router définit une clé sur votre gestionnaire en fonction de l'itinéraire actuel. Lorsque réagit son diff, et remarque une clé différente, il jette le sous-arbre entier à la fois dans le dom virtuel et réel, et les restitutions.

Pour éviter cela, vous pouvez remplacer la clé de react-router lorsque vous utilisez activeRouteHandler ()

this.props.activeRouteHandler({key: "anything"})
10
FakeRainBrigand

Il est difficile de travailler avec react-router car cela implique des changements importants dans chaque version majeure et mineure.

React Router v2.0 rc5 

import { hashHistory } from 'react-router'
this.props.location.query.t = key;
hashHistory.replace(this.props.location);
8
Mr.Wang from Next Door

Pour React router v4 vous devez utiliser history et le transmettre comme accessoire à Router. Router passera ensuite l'objet history à votre composant en tant qu'accessoire et vous pourrez l'utiliser comme suit:

// In your component

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

Fiche historique

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

export default createHistory();

Ensuite, quel que soit l'endroit où vous déclarez votre routeur, transmettez l'historique

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

    <Router history={history}>
      // ... Your component
    </Router>
0
Matthew Barbara