duplicate browserHistory react-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

您似乎添加事件偵聽器時的路線進入，但他們沒有被路由葉時取出。這意味着您有多個聽衆對​​事件做出反應。

您應該使事件功能非匿名，並添加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} />