duplicate browserHistory response-router

Question

У меня проблема со следующим кодом: Этот код, что он делает, это при вводе вверх или вниз. Я меняю путь, и он отлично работает, но проблема в том, что каждый раз, когда он меняет, он удваивается браузер, и приводит к тому, веб-страницы, чтобы быть заблокирован

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

Вы кажетесь добавления слушателей событий, когда маршрут входит, но они не удаляются, когда листья маршрута. Это будет означать, что несколько слушателей реагируют на событие keydown.

Вы должны сделать функцию события не анонимной и добавить крючок onLeave к маршрутам.

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} />