duplicate browserHistory react-router

Question

I have a problem with the following code: This code what it does is when typing up or down I change the path, and it works fine, but the problem is that every time it changes it doubles the browser, and causes the web page to be blocked

function homeChange(e){

  $(window).keydown(function(event) { 
    if(event.which==40){
      browserHistory.push('/aplicaciones_moviles');
      console.log(browserHistory)
    }
  });
}
function appServiceChange(){
  $(window).keydown(function(event) { 
    if(event.which==40){
      console.log(browserHistory)
      browserHistory.push('/software_medida');
    }else if(event.which==38){
      browserHistory.push('/aplicaciones_moviles');
      console.log(browserHistory)
    }
  });

}
function softwareServiceChange(){
  $(window).keydown(function(event) { 
    if(event.which==40){
      console.log(event)
      browserHistory.push('/portafolio');
    }else if(event.which==38){
      browserHistory.push('/aplicaciones_moviles');
    }
  });
}

function portafolioChange(){
  $(window).keydown(function(event) { 
    if(event.which==40){
      console.log(event)
      browserHistory.push('/');
    }else if(event.which==38){
      browserHistory.push('/software_medida');
    }
  });
}

export default class Routes extends Component {
  render() {
    return (
      <Router history={browserHistory} >
        <Route path='/' component={HomeLayout} onEnter={homeChange} >
          <IndexRoute component={HomeComponent} />
        </Route>
        <Route path='aplicaciones_moviles' component={AppServiceLayout} onEnter={appServiceChange} >
          <IndexRoute  />
        </Route>
        <Route path='software_medida' component={softwareServiceLayout} onEnter={softwareServiceChange}>
          <IndexRoute  />
        </Route>        
        <Route path='portafolio' component={portafolioLayout} onEnter={portafolioChange}>
          <IndexRoute  />
        </Route>
        <Route path='*' component={HomeLayout}>
          <IndexRoute component={NotFoundComponent} />
        </Route>
      </Router>
    );
  }
}

Answer 1

You appear to be adding event listeners when a route enters, but they are not being removed when the route leaves. This will mean that you have multiple listeners reacting to the keydown event.

You should make the event function non-anonymous and add an onLeave hook to the routes.

function portafolioEvent(event) { 
  if(event.which==40){
    console.log(event)
    browserHistory.push('/');
  } else if(event.which==38){
    browserHistory.push('/software_medida');
  }
}

function addPortafolioListener() {
  $(window).on('keydown', portafolioEvent);
}

function removePortafolioListener() {
  $(window).off('keydown', portafolioEvent);
}

<Route
  path='portafolio'
  component={portafolioLayout}
  onEnter={addPortafolioListener}
  onLeave={removePortafolioListener} />