Soy nuevo en ReactJS y en React-Router. Tengo un componente que recibe a través de accesorios un <Link/>objeto de react-router . Cada vez que el usuario hace clic en el botón 'siguiente' dentro de este componente, quiero invocar el <Link/>objeto manualmente.

En este momento, estoy usando referencias para acceder a la instancia de respaldo y haciendo clic manualmente en la etiqueta 'a' que <Link/>genera.

Pregunta: ¿Hay alguna forma de invocar manualmente el enlace (por ejemplo this.props.next.go)?

Este es el código actual que tengo:

//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />

//in Document.js
...
var Document = React.createClass({
   _onClickNext: function() {
      var next = this.refs.next.getDOMNode();
      next.querySelectorAll('a').item(0).click(); //this sounds like hack to me
   },
   render: function() {
      return (
         ...
         <div ref="next">{this.props.next} <img src="rightArrow.png" onClick={this._onClickNext}/></div>
         ...
      );
   }
});
...

Este es el código que me gustaría tener:

//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />

//in Document.js
...
var Document = React.createClass({
   render: function() {
      return (
         ...
         <div onClick={this.props.next.go}>{this.props.next.label} <img src="rightArrow.png" /> </div>
         ...
      );
   }
});
...

React Router v4 - Redirect Component (actualizado 15/04/2017)

La forma recomendada de v4 es permitir que su método de renderizado atrape una redirección. Use el estado o los accesorios para determinar si el componente de redireccionamiento debe mostrarse (que luego desencadena una redirección).

import { Redirect } from 'react-router';

// ... your class implementation

handleOnClick = () => {
  // some action...
  // then redirect
  this.setState({redirect: true});
}

render() {
  if (this.state.redirect) {
    return <Redirect push to="/sample" />;
  }

  return <button onClick={this.handleOnClick} type="button">Button</button>;
}

Referencia: https://reacttraining.com/react-router/web/api/Redirect

React Router v4 - Contexto de referencia del enrutador

También puede aprovechar Routerel contexto que está expuesto al componente Reaccionar.

static contextTypes = {
  router: PropTypes.shape({
    history: PropTypes.shape({
      push: PropTypes.func.isRequired,
      replace: PropTypes.func.isRequired
    }).isRequired,
    staticContext: PropTypes.object
  }).isRequired
};

handleOnClick = () => {
  this.context.router.push('/sample');
}

Así es como <Redirect />funciona debajo del capó.

Referencia: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Redirect.js#L46,L60

React Router v4: objeto de historial de mutación externa

Si aún necesita hacer algo similar a la implementación de v2, puede crear una copia y BrowserRouterluego exponerla historycomo una constante exportable. A continuación se muestra un ejemplo básico, pero puede componerlo para inyectarlo con accesorios personalizables si es necesario. Hay advertencias notables con los ciclos de vida, pero siempre debe volver a generar el enrutador, al igual que en v2. Esto puede ser útil para redireccionamientos después de una solicitud de API desde una función de acción.

// browser router file...
import createHistory from 'history/createBrowserHistory';
import { Router } from 'react-router';

export const history = createHistory();

export default class BrowserRouter extends Component {
  render() {
    return <Router history={history} children={this.props.children} />
  }
}

// your main file...
import BrowserRouter from './relative/path/to/BrowserRouter';
import { render } from 'react-dom';

render(
  <BrowserRouter>
    <App/>
  </BrowserRouter>
);

// some file... where you don't have React instance references
import { history } from './relative/path/to/BrowserRouter';

history.push('/sample');

Lo último BrowserRouteren extenderse: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js

React Router v2

Empuje un nuevo estado a la browserHistoryinstancia:

import {browserHistory} from 'react-router';
// ...
browserHistory.push('/sample');

Referencia: https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md

React Router 4 incluye un withRouter HOC que le da acceso al historyobjeto a través de this.props:

import React, {Component} from 'react'
import {withRouter} from 'react-router-dom'

class Foo extends Component {
  constructor(props) {
    super(props)

    this.goHome = this.goHome.bind(this)
  }

  goHome() {
    this.props.history.push('/')
  }

  render() {
    <div className="foo">
      <button onClick={this.goHome} />
    </div>
  }
}

export default withRouter(Foo)

En la versión 5.x , puede usar el useHistorygancho de react-router-dom:

// Sample extracted from https://reacttraining.com/react-router/core/api/Hooks/usehistory
import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

https://github.com/rackt/react-router/blob/bf89168acb30b6dc9b0244360bcbac5081cf6b38/examples/transitions/app.js#L50

o incluso puedes intentar ejecutar onClick this (solución más violenta):

window.location.assign("/sample");

Ok, creo que pude encontrar una solución adecuada para eso.

Ahora, en lugar de enviar <Link/>como accesorio al documento, envío <NextLink/>un envoltorio personalizado para el enlace del enrutador de reacción. Al hacer eso, puedo tener la flecha hacia la derecha como parte de la estructura de Enlace sin dejar de tener el código de enrutamiento dentro del objeto Documento.

El código actualizado se ve así:

//in NextLink.js
var React = require('react');
var Right = require('./Right');

var NextLink = React.createClass({
    propTypes: {
        link: React.PropTypes.node.isRequired
    },

    contextTypes: {
        transitionTo: React.PropTypes.func.isRequired
    },

    _onClickRight: function() {
        this.context.transitionTo(this.props.link.props.to);
    },

    render: function() {
        return (
            <div>
                {this.props.link}
                <Right onClick={this._onClickRight} />
            </div>  
        );
    }
});

module.exports = NextLink;

...
//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
var nextLink = <NextLink link={sampleLink} />
<Document next={nextLink} />

//in Document.js
...
var Document = React.createClass({
   render: function() {
      return (
         ...
         <div>{this.props.next}</div>
         ...
      );
   }
});
...

PD : si está utilizando la última versión de react-router, es posible que deba utilizarla en this.context.router.transitionTolugar de this.context.transitionTo. Este código funcionará bien para react-router versión 0.12.X.

React Router 4

Puede invocar fácilmente el método push a través del contexto en v4:

this.context.router.push(this.props.exitPath);

donde el contexto es:

static contextTypes = {
    router: React.PropTypes.object,
};

de nuevo, esto es JS :) esto todavía funciona ...

var linkToClick = document.getElementById('something');
linkToClick.click();

<Link id="something" to={/somewhaere}> the link </Link>