reactjs - link - Cómo emular window.location con react-router y clases ES6

react-router-dom redirect

Question

Estoy usando react-router, así que uso el componente <Link /> para mis enlaces a través de la aplicación, en algunos casos necesito generar dinámicamente el enlace basado en la entrada del usuario, así que necesito algo como window.location , pero sin la página se actualiza.

Encontré esta pequeña nota - ( https://github.com/rackt/react-router/issues/835 ) - intenté usar this.context.router.transitionTo(mylink) pero tengo problemas con el contexto ...

lo que me llevó a ( https://github.com/rackt/react-router/issues/1059 ), sin embargo, el contexto vuelve y el objeto está vacío, así que cuando intento hacer algo como: this.context.router.transitionTo(mylink); Obtengo Cannot read property ''transitionTo'' of undefined se Cannot read property ''transitionTo'' of undefined (si intento hacer algo como establecer this.context = context dentro del constructor).

No para alargar, pero también estoy cansado de jugar demasiado con el contexto, ya que no está documentado a propósito, ya que todavía es un trabajo en progreso, por lo que he leído.

¿Alguien ha encontrado un problema similar?

Answer 1

Después de perder tiempo con el enrutador de reacción, finalmente cambio a javascript básico.

1. Cree un componente para su redireccionamiento:

   Ruta de ruta = "*" componente = {NotFound}

2. En el componente use window.location para redirigir:

    componentDidMount() {
         if (typeof window !== ''undefined'') {
              window.location.href = "http://foo.com/error.php";
         }
    }

Answer 2

Echa un vistazo a la mezcla de Navigation de reaccion-router. http://rackt.github.io/react-router/#Navigation

De los documentos:

var Navigation = require(''react-router'').Navigation;

React.createClass({
  mixins: [Navigation],

  render: function() {
    return (
      <div onClick={() => this.transitionTo(''foo'')}>Go to foo</div>
      <div onClick={() => this.replaceWith(''bar'')}>Go to bar without creating a new history entry</div>
      <div onClick={() => this.goBack()}>Go back</div>
    );
  }
});

Answer 3

En tal situación, normalmente uso hashHistory o browserHistory dependiendo de lo que esté usando y simplemente llame a hashHistory.push(<url>) . Si está utilizando clases de ES6, también puede withRouter por withRouter Hoc proporcionado por reaccion-router como se menciona here . Este componente de orden superior expone un prop en su componente llamado router . Usando este prop puedes redirigir usando this.props.router.push(<url>) .

Si tiene que usar el enrutador desde el contexto, deberá proporcionar los tipos de contexto como se menciona en la respuesta de @Ben.

Answer 4

Encontré una solución aquí: https://github.com/rackt/react-router/issues/975 , y aquí: https://github.com/rackt/react-router/issues/1499

Necesario en constructor:

class SidebarFilter extends React.Component {

    constructor(props, context) {
        super(props, context);

También es necesario agregar una propiedad estática:

SidebarFilter.contextTypes = {
  router: React.PropTypes.func.isRequired
};

Entonces podría llamar:

this.context.router.transitionTo(/path-to-link);

Answer 5

Si está utilizando browserHistory para React-router, la vida es más sencilla.

import {browserHistory} from "react-router";

functionName() {
 browserHistory.push("/path-to-link");
}