componentWillUnmount not called when I go to new route

[sslash]

componentWillUnmount dosnt trigger when I go to a new route that is part of a tabBar router.
It happens when I to Action.toMyOtherRoute(), and when I press on one of the other buttons in the tabBar.
The problem with this is that if a reducer updates the store that the "Old-route" listens to, the old-route will re-render.

[aksonov]

But 'old-route' still in the nav stack (that is why it will not be unmounted), right? Looks like it is not connected with this component, but general redux/flux question. I'm solving it by checking if route is "current route" then update, otherwise don't update.

[sslash]

how do you check if the component is "current route"? I can't see any such property on the route component

[Durgaprasad-Budhwani]

@aksonov Have you found any solution for this fix ?

[aksonov]

Please check latest 2.0 version. There is Actions.currentRouter property and Router has currentRoute property as well, so you could use Actions.currentRouter.currentRoute

[michalpetrov]

I'm not sure if this is the same problem, but when I have tabbar router with tree routes in it and I click on the tab button, then Tabs component is rerendered four times. The view seems to be switched immediately but applying the "selected" style on the new selected tab button is lagging cca 1 second.
Tested with version 2.0.5.

[aksonov]

@sslash check Actions.currentRouter.currentRoute

[aksonov]

@michalpetrov i saw such behavior as well, it seems not connected with this issue. You may create new ticket, PR is welcome!

[sslash]

@aksonov the problem with Actions.currentRouter.currentRoute is that if your current route is inside a tabBar, its name resolves to the tabBar route, not the current (nested) child route. Say I have

<Route name="tabbar">
                    <Router footer={TabBar} hideNavBar>
                    <Route name="home" schema="tab" component={Home} />
                    </Router>
</Route>

And I am currently on "home", Actions.currentRouter.currentRoute.name = tabbar and not home

[aksonov]

Strange, with 2.0.9 I've fixed that - it should deep into child route after Actions.route method:

            // deep into child router
            while (router.currentRoute.childRouter){
                router = router.currentRoute.childRouter;
                debug("Switching to child router="+router.name);
            }

[tonyneel923]

@aksonov Is Actions.currentRouter.currentRoute still the recommended way to do this? I cannot seem to get this to work in 3.32.0

[pewh]

+1 latest version doesn't have Actions.currentRouter anymore. So how to access currentRoute?

[mandycandyqt]

@pewh have you found a solution for this?

[pewh]

create _createReducer function:

  _createReducer = (params) => {
    const { dispatch } = this.props
    const defaultReducer = Reducer(params)

    return (state, action) => {
      if (action.type === ActionConst.FOCUS) {
        dispatch(updateScene(action.scene.name))
      }

      return defaultReducer(state, action) 
    }
  }

then in render,

return (
      <Router
        scenes={routes}
        createReducer={this._createReducer}
     ...
      />
    )

updateScene is just a redux action. Here is my updateScene function:

export function updateScene(sceneName) {
  return (dispatch, state) => {
    dispatch(createAction('SET_ROUTE')(sceneName))
  }
}

then in reducer:

export const routeReducer = handleActions({
  SET_ROUTE: (state, action) => ({
    ...state,
    currentScene: action.payload,
  }),
}, { currentScene: '' })

What I've done is simulate Actions.currentRouter function by create own reducer. Hope it solve your problem.