React-Router: применить логику к компоненту перед переходом на другой маршрут - PullRequest
Новая
       13

React-Router: применить логику к компоненту перед переходом на другой маршрут

0 голосов
/ 29 мая 2018

Можно ли применить логику к компоненту перед переходом на другой маршрут?

Например, мой компонент выглядит примерно так: 

  class Example extends React.Component {

    //Handles logic for when user leaves page
    handlePageExit = () => {
        console.log("Leaving page...");
    }

    //Set onBeforeUnload event listener so handlePageExit function is called when user closes or refreshes page
    componentDidMount = () => {
        window.addEventListener("onbeforeunload", this.handlePageExit);
    }

    //This hook is called when page exits or is refreshed 
    //It will remove event listener when 
    //However, it wont be called when user changes to a new route
    componentWillMount = () => {
        window.removeEventListener("onbeforeunload", this.handlePageExit)
    }

    //There's no react life cycle hook I can use to call HandlePageLogic when user navigates to a new route to remove event listener or apply other logic...

    render(){
        return(
          <div /> //Not relevant to question
        )
    }
}

Я пытаюсь применитьтакая логика, как удаление прослушивателей событий до перехода страницы на новый маршрут.

Я пытался использовать методы жизненного цикла, такие как componentWillReceiveProps, componentWillUnmount и componentShouldUpdate, чтобы вставить логику перед размонтированием компонента, однако они не вызываются при переходе к новомустр.

Кто-нибудь знает, где или как я могу вставить логику между сменой маршрута в response-router v4?

Спасибо.

1 Ответ

0 голосов
/ 29 мая 2018

Да, это так.Вам необходимо добавить прослушиватель изменений для реагирующего объекта истории маршрутизатора.

Чтобы сделать это, добавьте в свой componentDidMount, который имеет историю prop: 

componentDidMount() {
    this.props.history.listen(this.onRouteChange.bind(this));
  }

onRouteChange(route) {
//route.pathname = Your next route

//Handle what you need to do here
//if you need to redirect you can do this
     this.props.history.replace({pathname: '/desiredRoute'});
  }
...