Как эмулировать window.location с классами action-router и ES6

Question

Я использую агент-ретранслятор, поэтому я использую компонент <Link /> для своих ссылок в приложении, в некоторых случаях мне нужно динамически генерировать ссылку на основе пользователя input, поэтому мне нужно что-то вроде 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 внутри конструктора).

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

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

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

Answer 2

Посмотрите на смеситель 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> 
    ); 
    } 
}); 

Answer 3

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

import {browserHistory} from "react-router"; 

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

Answer 4

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

1. Создать компонент для редиректа:

   Маршрут пути = "*" компонент = {} NotFound

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

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

Answer 5

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

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