React-router: как вручную вызвать ссылку?


131

Я новичок в ReactJS и React-Router. У меня есть компонент, который через реквизит получает <Link/>объект от реактивного маршрутизатора . Каждый раз, когда пользователь нажимает кнопку «Далее» внутри этого компонента, я хочу вызвать <Link/>объект вручную.

Прямо сейчас я использую refs для доступа к резервному экземпляру и вручную нажимаю на <Link/>генерируемый тег «a» .

Вопрос: есть ли способ вручную вызвать ссылку (например this.props.next.go)?

Это текущий код, который у меня есть:

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

Вот код, который я хотел бы иметь:

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

Ответы:


199

React Router v4 - компонент перенаправления (обновлено 15.04.2017)

Рекомендуемый способ v4 - разрешить вашему методу рендеринга перехватывать перенаправление. Используйте состояние или реквизиты, чтобы определить, нужно ли показывать компонент перенаправления (который затем запускает перенаправление).

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

Ссылка: https://reacttraining.com/react-router/web/api/Redirect

React Router v4 - контекст эталонного маршрутизатора

Вы также можете воспользоваться Routerконтекстом, доступным для компонента 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');
}

Так <Redirect />работает под капотом.

Ссылка: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Redirect.js#L46,L60

React Router v4 - объект истории внешнего изменения

Если вам все еще нужно сделать что-то похожее на реализацию v2, вы можете создать копию, а BrowserRouterзатем предоставить ее historyкак экспортируемую константу. Ниже приведен базовый пример, но вы можете составить его, чтобы добавить настраиваемые реквизиты, если это необходимо. Есть отмеченные оговорки с жизненными циклами, но он всегда должен повторно отображать маршрутизатор, как и в v2. Это может быть полезно для перенаправления после запроса API от функции действия.

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

Последнее BrowserRouterдля расширения: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js

React Router v2

Отправьте новое состояние browserHistoryэкземпляру:

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

Ссылка: https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md


7
hashHistory.push ( '/ образец'); если вы используете hashHistory вместо browserHistory
sanath_p

1
это особенно полезно в библиотеке material-ui, поскольку использование containerElement = {<Link to = "/" />} не всегда вызывает ссылку
Вишал Дисавар

2
Обратите внимание, что для параметра перенаправления вы должны указать push (т.е. <Redirect push />). По умолчанию он выполнит замену, что совсем не то же самое, что ручной
вызов

1
@jokab, вы можете использовать <NavLink /> вместо <Link /> github.com/ReactTraining/react-router/blob/master/packages/…
Мэтт Ло

1
Редирект у меня не работает, но решение aw04 с withRouter более простое и работает
stackdave

90

React Router 4 включает withRouter HOC, который дает вам доступ к historyобъекту через 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)

9
Это сработало для меня, и это похоже на самое простое решение.
Rubycut

5
Это лучшее решение. Я не понимаю, почему у него так мало голосов.
Benoit

1
да, вы можете нажать на ссылку несколько раз, и браузер не будет работать обратно. вам нужно будет несколько раз нажать на браузер назад, чтобы действительно вернуться
Владислав Терешин

@VladyslavTereshyn, вы можете добавить условную логику: if ((this.props.location.pathname + this.props.location.search)! == navigateToPath) {...}
MattWeiler

15

В версии 5.x вы можете использовать useHistoryловушку 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>
  );
}

Это лучшее решение. Если вы добавите некоторую условную логику, вы можете избежать повторяющихся записей в истории, когда пользователь нажимает одну и ту же кнопку несколько раз:if ((routerHistory.location.pathname + routerHistory.location.search) !== navigateToPath) { routerHistory.push(navigateToPath); }
MattWeiler,

Мне нужно было объявить historyпеременную, useHistory().push
вызов

это кажется самым современным реакционным решением.
Ёнджэ

8

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

или вы даже можете попробовать выполнить onClick this (более жестокое решение):

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

По мере изменения строк кода ваш ответ будет лучше, если вы скопируете детали и объясните свой ответ здесь. Кроме того, assignэто не свойство, это функция.
WiredPrairie,

(Но у вас все еще есть ссылка на определенную строку файла). Пожалуйста, включите в свой ответ конкретное предложение, а не просто ссылку.
WiredPrairie

Спасибо за ответ @grechut. Однако я хочу убедиться, что Документ вообще ничего не знает о маршрутизаторе. Я ожидаю следующего поведения: «Если пользователь щелкает стрелку вправо, вызывает следующую функцию». Следующая функция может быть ссылкой или нет.
Алан Соуза,

У меня есть несколько страниц, обрабатываемых вне React (экраны входа в систему с перенаправлением FB и Google), поэтому мне это нужно в навигационной панели для этих страниц, так как "browserHistory.push ('/ home');" изменил только URL-адрес, он не смог маршрутизировать страницы. Спасибо.
Дебора

7
Это перезагрузит страницу @grechut, что нежелательно для приложения с реагирующим маршрутизатором.
Abhas

2

Хорошо, думаю, я смог найти для этого подходящее решение.

Теперь вместо отправки в <Link/>качестве опоры в Document я отправляю <NextLink/>пользовательскую оболочку для ссылки на реактивный маршрутизатор. Делая это, я могу иметь стрелку вправо как часть структуры Link, избегая при этом наличия кода маршрутизации внутри объекта Document.

Обновленный код выглядит следующим образом:

//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 : Если вы используете последнюю версию response-router, вам может потребоваться использовать this.context.router.transitionToвместо this.context.transitionTo. Этот код будет нормально работать с реактивным маршрутизатором версии 0.12.X.


2

React Router 4

Вы можете легко вызвать метод push через контекст в v4:

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

где контекст:

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

Используя BrowserRouter, объект контекста моих компонентов не содержит routerобъекта. Я что-то не так делаю?
плов

Вы устанавливаете контекст в компоненте (второй блок выше)?
Крис

Спасибо за участие! в конце концов , это работало для меня router: React.PropTypes.object.isRequired. Не знаю, почему не получилось без isRequiredключа. Кроме того, <Link>похоже, удалось получить historyконтекст, но я не мог его воспроизвести.
плов

Интересный вариант - если вы разместите код, я могу помочь вам отладить его, если вы все еще застряли
Крис

Похоже, вы можете использовать this.props.history.push()в React Router v4. Я нашел это, только проверив реквизиты, которые передает React Router. Кажется, это работает, но я не уверен, что это хорошая идея.
sean_j_roberts

-1

снова это JS :) это все еще работает ....

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

<Link id="something" to={/somewhaere}> the link </Link>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.