reactjs - navlink - redirect react router v4

React router-Actualiza el hash de URL sin volver a renderizar la página

Question

Utilizando react-router estoy buscando una manera de actualizar la URL / hash de la página, sin que el enrutador vuelva a renderizar toda la página.

Estoy desarrollando un carrusel de página completa y me gustaría que cada diapositiva tuviera su propia URL (lo que permite al usuario actualizar la página y volver a la diapositiva correcta). Más tarde, el carrusel se deslizará de manera similar a esta demostración , lo que significa que la siguiente diapositiva se representará previamente.

Una versión reducida de mi carrusel está disponible here .

El cambio de diapositiva actual se ve así:

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

Esto funciona bien, sin actualizaciones de URL. Lo que realmente quiero es:

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

Esto establecería el apoyo de la diapositiva actual, permitiendo que el carrusel se anime. Sin embargo, el uso de este método ahora hace que la página se vuelva a generar y no se muestre ninguna animación.

He visto el ReactCSSTransitionGroup utilizado para las transiciones de ruta, sin embargo, esto parece estar orientado a renderizar una nueva página y hacer la transición de la anterior.

Si ya hay una manera de lograr lo que estoy buscando y lo he perdido, ¿podría alguien indicarme la dirección correcta?

Answer 1

1.0

react-router ya no establece una clave en sus rutas. Si necesita configurar una clave desde un controlador de ruta, póngala en un elemento circundante.

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

0.13

Ahora es <ReactRouter.RouteHandler key="anything" /> , pero esto ya no es realmente necesario debido a los cambios en el enrutador de reacción. Ver el registro de cambios para más detalles.

0.12

Actualmente, react-router establece una clave en su controlador en función de la ruta actual. Cuando reacciona hace su diferencia y se da cuenta de una clave diferente, arroja todo el subárbol tanto en dom virtual como real, y re-emite.

Para evitar esto, puede anular la clave del enrutador de reacción al usar activeRouteHandler ()

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

Answer 2

Es un dolor trabajar con react-router porque implica romper cambios en cada versión principal y secundaria.

React Router v2.0 rc5

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

Answer 3

Para React Router v4 , debe usar el history y pasarlo como apoyo al Router . Router luego pasará el objeto history a su componente como prop y podrá usarlo así:

// In your component

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

Archivo de historia

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

export default createHistory();

Luego, donde sea que esté declarando su enrutador, pase el apoyo histórico.

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

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