React-router: Como chamar manualmente o Link?

131

Eu sou novo no ReactJS e no React-Router. Eu tenho um componente que recebe por meio de adereços um <Link/>objeto do react-router . Sempre que o usuário clica em um botão 'próximo' dentro deste componente, desejo chamar o <Link/>objeto manualmente.

No momento, estou usando refs para acessar a instância de backup e clicando manualmente na tag 'a' que <Link/>gera.

Pergunta: Existe uma maneira de chamar manualmente o Link (por exemplo this.props.next.go)?

Este é o código atual que tenho:

//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 é o código que eu gostaria de ter:

//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>
         ...
      );
   }
});
...
Alan Souza
fonte

Respostas:

199

React Router v4 - Componente de redirecionamento (atualizado em 15/04/2017)

A maneira recomendada da v4 é permitir que seu método de renderização capture um redirecionamento. Use state ou props para determinar se o componente de redirecionamento precisa ser mostrado (o que aciona um redirecionamento).

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>;
}

Referência: https://reacttraining.com/react-router/web/api/Redirect

React Router v4 - Contexto do roteador de referência

Você também pode tirar proveito do Routercontexto exposto ao componente 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');
}

É assim que <Redirect />funciona sob o capô.

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

React Router v4 - Objeto de histórico de mutação externa

Se você ainda precisar fazer algo semelhante à implementação da v2, poderá criar uma cópia BrowserRoutere expor a historyconstante exportável. Abaixo está um exemplo básico, mas você pode compor para injetar adereços personalizáveis, se necessário. Existem advertências importantes nos ciclos de vida, mas ele deve sempre renderizar novamente o roteador, assim como na v2. Isso pode ser útil para redirecionamentos após uma solicitação de API de uma função de ação.

// 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');

Última BrowserRouteratualização: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js

React Router v2

Envie um novo estado para a browserHistoryinstância:

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

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

Matt Lo
fonte
7
hashHistory.push ('/ sample'); se você estiver usando hashHistory em vez de browserHistory
sanath_p
1
isso é especialmente útil na biblioteca de materiais-ui como a utilização de containerElement = {<Link to = "/" />} nem sempre invocar a ligação
Vishal Disawar
2
Observe que com a opção de redirecionamento, você deve especificar push (por exemplo, <Redirect push />). Por padrão, ele vai fazer uma substituição que não é de todo a mesma chamando manualmente um link
aw04
1
@jokab, você pode usar o <NavLink /> em vez do <Link /> github.com/ReactTraining/react-router/blob/master/packages/…
Matt Lo
1
Redirect não está funcionando para mim, mas solução aw04 com withRouter é mais simples e trabalhando
stackdave
90

O React Router 4 inclui um withRouter HOC que fornece acesso ao historyobjeto via 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)
aw04
fonte
9
Isso funcionou para mim e parece a solução mais simples.
Rubycut
5
essa é a melhor solução. Não entendo por que tem tão poucos votos.
Benoit
1
Sim, você pode clicar no link algumas vezes e o navegador não funcionará. você precisa clicar no navegador de volta para algumas vezes para realmente voltar
Vladyslav Tereshyn
@VladyslavTereshyn, você pode adicionar uma lógica condicional: if ((this.props.location.pathname + this.props.location.search)! == navigateToPath) {...}
MattWeiler
15

Na versão 5.x , você pode usar o 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>
  );
}
Paulo Mateus
fonte
essa é a melhor solução. Se você adicionar alguma lógica condicional, poderá evitar entradas duplicadas no histórico quando um usuário clicar no mesmo botão várias vezes:if ((routerHistory.location.pathname + routerHistory.location.search) !== navigateToPath) { routerHistory.push(navigateToPath); }
MattWeiler
Eu precisava declarar historyvariável, a chamada de diretório useHistory().pushnão é permitida pelas regras de hooks
onmyway133
essa parece ser a solução reativa mais moderna.
Youngjae
8

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

ou você pode tentar executar onClick this (solução mais violenta):

window.location.assign("/sample");
grechut
fonte
À medida que as linhas de código mudam, sua resposta será melhor se você copiar os detalhes e explicar sua resposta aqui. Além disso, assignnão é uma propriedade, é uma função.
WiredPrairie
(Mas você ainda tem um link para uma linha específica de um arquivo). Inclua a sugestão específica em sua resposta, e não apenas um link.
WiredPrairie
Obrigado pela sua resposta @grechut. No entanto, quero garantir que o documento não saiba nada sobre o roteador. O comportamento que estou esperando é: 'Se o usuário clicar na seta à direita, chame a próxima função'. A próxima função pode ser um link ou não.
Alan Souza
Eu tenho algumas páginas tratadas fora do React (telas de login com redirecionamentos do FB e do Google), então eu precisava disso na navegação para essas páginas desde "browserHistory.push ('/ home');" alterou apenas o URL, não foi possível rotear as páginas. Obrigado.
Deborah
7
Isso recarregaria a página @grechut, não o comportamento desejado para um aplicativo com roteador de reação.
Abhas
2

Ok, acho que consegui encontrar uma solução adequada para isso.

Agora, em vez de enviar <Link/>como suporte ao documento, envio <NextLink/>um invólucro personalizado para o link react-router. Ao fazer isso, sou capaz de ter a seta direita como parte da estrutura do Link, evitando ainda ter o código de roteamento dentro do objeto Document.

O código atualizado tem a seguinte aparência:

//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>
         ...
      );
   }
});
...

PS : Se você estiver usando a versão mais recente do react-router, talvez seja necessário usá-lo em this.context.router.transitionTovez de this.context.transitionTo. Este código funcionará bem para o react-router versão 0.12.X.

Alan Souza
fonte
2

React Router 4

Você pode invocar facilmente o método push via contexto na v4:

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

onde o contexto é:

static contextTypes = {
    router: React.PropTypes.object,
};
Chris
fonte
Usando BrowserRouter, o objeto de contexto dos meus componentes não contém um routerobjeto. Estou fazendo algo errado?
Pilau #
Você está definindo o contexto no componente (o segundo bloco acima)?
Chris
Obrigado por compartilhar! Eventualmente, isso funcionou para mim: router: React.PropTypes.object.isRequired. Não sei por que não funcionou sem a isRequiredchave. Além disso, <Link>parece ser capaz de obter o historycontexto, mas não consegui replicá-lo.
pilau
Um interessante - se você colocar um codepen eu poderia ajudá-lo a depurá-lo se você ainda está preso
Chris
Parece que você pode usar o this.props.history.push()React Router v4. Só descobri isso inspecionando os adereços pelos quais o React Router passa. Parece funcionar, mas não tenho certeza se é uma boa ideia.
21717
-1

Novamente, isso é JS :) isso ainda funciona ....

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

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