React-Router - Ссылка на ту же страницу, что и не запускающая страница unMount

Question

Я использую react-router Link для навигации по моему SPA-приложению.

В некоторых случаях я получаю ситуацию, когда есть ссылка со страницы на ту же самую страницу с теми же параметрами, напр:

Я в ../page1/2 и у меня есть ссылка на тот же маршрут:

<Link to='/page1/2'> 
    click me 
</Link> 

Моя проблема заключается в том, что в этой ситуации componentWillUnmount и componentDidMount не стреляли, только componentDidUpdate.

Это проблема, потому что мне нужно сделать чистку в componentWillUnmount.

Какое решение?

Answer 1

Чтобы обработать эти изменения, компонент componentWillReceiveProp необходимо проверить, реагировать-маршрутизатор идентифицировать компонент активным и не размонтировать компонент, просто передать новые свойства.

componentWillReceiveProps (nextProps) { 
    if(nextProps.id === this.props.id) { 
    // Clean component and reload? 
    } 
} 

Answer 2

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

В вашем случае страница будет такой же, что и React думает, что никаких изменений не произошло. Поэтому компонент никогда не будет повторно отображать и никогда не размонтировать.

Простейшим решением было бы добавить обработчик onClick к <Link />, который сделает вашу очистку для вас. Что-то вроде этого:

handleCleanup(e) { 
    if (window.location.href === e.target.href) { 
    // do your cleanup like you do in componentWillUnmount 
    } 
} 
render() { 
    return <Link onClick={this.handleCleanup.bind(this)} to={`/page/1/${this.state.someProp}` /> 
} 

Answer 3

Когда вы меняете только параметры и обрабатывается один и тот же обработчик, обработчик не будет перемонтироваться; он будет обновляться только так, как дети в Реактинге не будут перемонтированы, изменив их реквизит (кроме ключа). Таким образом, вы не получаете componentDidMount, а componentWillReceiveProps.

componentWillReceiveProps (nextProps) { 
    // do whatever clean up you need before rerendering 
    // goo practise checking somehow that you are in the desired situation 
} 

Во всяком случае я предлагаю вам взглянуть на React Component lifecycle, что действительно важно, если вы изучаете эти рамки.