Как эмулировать window.location с классами с ответным маршрутизатором и ES6

Я использую response-router, поэтому я использую компонент <Link /> для своих ссылок во всем приложении, в некоторых случаях мне нужно динамически генерировать ссылку на основе ввода пользователем, поэтому мне нужно что-то вроде window.location, но без обновления страницы.

Я нашел эту небольшую заметку - (https://github.com/rackt/react-router/issues/835) - я попытался использовать this.context.router.transitionTo(mylink), но у меня возникли проблемы с контекстом..

который привел меня к (https://github.com/rackt/react-router/issues/1059), однако контекст возвращает и пустой объект, поэтому, когда я пытаюсь сделать что-то вроде: this.context.router.transitionTo(mylink); Я получаю Cannot read property 'transitionTo' of undefined (если я пытаюсь сделать что-то вроде set this.context = context внутри конструктора).

Не перетаскивать, но я также устал от чрезмерного использования контекста, поскольку он не документирован специально, поскольку он все еще работает, поэтому я прочитал.

Кто-нибудь сталкивался с подобной проблемой?

Ответ 1

Нашел решение здесь: https://github.com/rackt/react-router/issues/975 и здесь: https://github.com/rackt/react-router/issues/1499

Требуется в конструкторе:

class SidebarFilter extends React.Component {

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

Также необходимо добавить статическое свойство:

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

Тогда я мог бы позвонить:

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

Ответ 2

Если вы используете browserHistory для React-router, жизнь проще.

import {browserHistory} from "react-router";

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

Ответ 3

Потеряв время с помощью маршрутизатора, я, наконец, переключись на базовый javascript.

Создайте компонент для перенаправления:

Путь маршрута = "*" component = {NotFound}

В компоненте используйте window.location для перенаправления:

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

Ответ 4

Взгляните на микс Navigation от реактивного маршрутизатора. http://rackt.github.io/react-router/#Navigation

Из документов:

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

Ответ 5

В такой ситуации я обычно использую hashHistory или browserHistory в зависимости от того, что вы используете, и просто вызывайте hashHistory.push(<url>). Если вы используете классы ES6, вы также можете перейти к withRouter Hoc, предоставленному реактивным маршрутизатором, как упомянуто здесь. Этот компонент более высокого порядка предоставляет опору в вашем компоненте под названием router. Используя эту опцию, вы можете перенаправить с помощью this.props.router.push(<url>).

Если вам нужно использовать маршрутизатор из контекста, вам нужно будет предоставить типы контекста, как указано в ответе @Ben.