Búsqueda de sitios web

javascript - ¿Cómo invocar manualmente Link en React-router?

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

En este momento, estoy usando refs para acceder a la instancia subyacente y hacer clic manualmente en la etiqueta 'a' que genera <Link/>.

Pregunta: ¿Existe una manera 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>
         ...
      );
   }
});
...

Respuesta #1

React Router v6.8 - React 18+ (actualizado 24/02/2023)

import React from 'react';
import {useNavigate} from 'react-router-dom';

export default function StackOverflowExample() {
  const navigate = useNavigate();
  const handleOnClick = () => navigate('/sample');

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

Documentos: https://reactrouter.com/en/main/hooks/use-navigate

React Router v6 - React 17+

import React, {useCallback} from 'react';
import {useNavigate} from 'react-router-dom';

export default function StackOverflowExample() {
  const navigate = useNavigate();
  const handleOnClick = useCallback(() => navigate('/sample', {replace: true}), [navigate]);

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

Nota: Para esta respuesta, el cambio principal entre v6 y v5 es que useNavigate ahora es el hook de React preferido. useHistory está en desuso y no se recomienda.

React Router v5 - React 16.8+ con Hooks

Si estás utilizando React Hooks, puedes aprovechar la API useHistory que proviene de React Router v5.

import React, {useCallback} from 'react';
import {useHistory} from 'react-router-dom';

export default function StackOverflowExample() {
  const history = useHistory();
  const handleOnClick = useCallback(() => history.push('/sample'), [history]);

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

Otra manera de escribir el manejador de clics si no quieres usar useCallback

const handleOnClick = () => history.push('/sample');

React Router v4 - Componente Redirect

La forma recomendada en v4 es permitir que tu método render capture un redireccionamiento. Usa el estado o las props para determinar si el componente de redirección necesita mostrarse (lo que luego provoca un redireccionamiento).

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 Enrutador de Referencia

También puedes aprovechar el contexto de Router que se expone al componente de React.

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 por dentro.

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

React Router v4 - Mutar Objetivamente el Objeto History

Si todavía necesitas hacer algo similar a la implementación de v2, puedes crear una copia de BrowserRouter y luego exponer el history como una constante exportable. A continuación hay un ejemplo básico, pero puedes componerlo para inyectarlo con props personalizables si es necesario. Hay advertencias con los ciclos de vida, pero siempre debería volver a renderizar el Router, 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');

Último BrowserRouter para extender: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js

React Router v2

Empuja un nuevo estado a la instancia browserHistory:

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

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

Respuesta #2

React Router 4 incluye un HOC withRouter que te da acceso al objeto history 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)

Respuesta #3

En la versión 5.x, puedes usar el hook useHistory 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>
  );
}

Respuesta #4

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

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

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

Artículos relacionados