Как заставить React Router обновлять контент при переходе по аналогичным страницам с одним и тем же Handler с динамическим path?

Question

[hbrmdc]

У меня есть вот такой Route:

<Route name="itemDetails" handler={ItemDetails} path="/item/:id"/>

он ведет на страницу полного описания товара.
На такой странице присутствуют "похожие предложения", содержащие Link, ведущий на такую же страницу с полным описанием другого товара. Handler, естественно тот-же - ItemDetails.
Я нажимаю на Link, адрес страницы в адресной строке браузера меняется, а контент остается прежним. Чтобы обновить контент, приходится обновлять страницу.
В случаях перехода между страницами с разными handler, контент обновляется и все работает нормально.

Почему так? Как заставить контент обновляться?

Answer 1

[Никита Гущин]

Какая версия реакта, роутера?

Попробуйте использовать метод componentWillReceiveProps - он должен вызываться, когда меняются параметры роута (в вашем случае - ID).

UPD1. Почему так происходит?
Когда компонент получает новые свойства (props) - он перерисовывается. Проблема может быть если Вы, например, используете параметры вашего роута через state:

class ControllerComponent extends Component {

    super() {
        super(props);
        this.state = { itemId: this.getParams().id };
    }

    //...

    render() {
        return (
            <div>
                <p>Blah blah blah</p>
                <SomeComponent itemId={this.state.itemId}/>
            </div>
        );
    }
}

При этом: когда меняется меняется id компонент ControllerComponent перерисовывается, но state не изменился, поэтому в SomeComponent попадет старый id и может показаться, что ничего не поменялось.

class ControllerComponent extends Component {

    super() {
        super(props);
        this.state = { itemId: this.getParams().id };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({ itemId: this.getParams().id });
    }

    //...

    render() {
        return (
            <div>
                <p>Blah blah blah</p>
                <SomeComponent itemId={this.state.itemId}/>
            </div>
        );
    }
}

Тогда все будет ок. Кстати, согласно докам componentWillReceiveProps:

Calling this.setState() within this function will not trigger an additional render.

Значит мы лишний раз не будем рендерить наш компонент. Успех)

Comments

[hbrmdc]

1. Версии последнии
2. Попробовал componentWillReceiveProps, работает приемлемо. Это так задумано или хак? Похоже на костыль. Вот тут (https://github.com/spoike/refluxjs/issues/336) есть рассуждение небольшое на эту тему, но как-то тоже не впечатлило. Не может быть, что такой банальный момент упущен разработчиками - скорее всего я в упор не вижу чего-то совершенно очевидного для всех)

[Никита Гущин]

hbrmdc: я добавил в ответ выше - "почему так происходит"

[janomtest]

hbrmdc: вот пример, как это предлагают делать разработчики react-router (https://github.com/rackt/react-router/blob/latest/...