Reagieren Router: Ignorieren Hashwechsel

Question

Ich habe einen Audio-Player und ich möchte die aktuelle URL immer auf die aktuell gespielte Position zeigen. Also dachte ich, ich würde einen neuen Standort mit demselben Schlüssel an den Router schicken, um dem Router mitzuteilen, dass er die Hash-Änderung ignorieren sollte.

audioElement.addEventListener('timeupdate', (evt) => { 
    this.props.router.push({ 
     ...this.props.location, 
     hash: '#'+audioElement.currentTime 
    }); 
}); 

Während die Audiodatei wiedergegeben wird, wird der Seiteninhalt jedoch erneut geladen. Wie kann ich verhindern, dass der Router auf das Hashchange-Ereignis reagiert?

Ich benutze Reagieren Router 3 und Redux. Ich bin bereit, auf v4 zu aktualisieren, wenn es die Änderung vornimmt, aber es sieht zu viel Anstrengung nur aus, um es zu versuchen.

Answer 1

Sie sind besser, Ihre '#'+audioElement.currentTime in den Verlaufsstatus zu setzen, da das Ändern des Hashes immer eine Aktualisierung verursachen wird (soweit ich weiß).

Sie können dies wie mit etwas tun:

audioElement.addEventListener('timeupdate', (evt) => { 
    this.props.router.push({ 
     ...this.props.location, 
     state: { 
      ...this.props.location.state, 
      audioCurrentTime: '#'+audioElement.currentTime 
     } 
    }); 
}); 

Answer 2

ich es react-router/lib/createTransitionManager.js durch das Patchen bekam. Es gibt eine function listen, wo ich diese grob hinzugefügt:

if (state.location.path === location.path && state.location.hash !== location.hash) { 
    /* do nothing */ 
} 
else { 
    ... 
} 

UPDATE: Für reagieren-Router 4, müssen Sie den Code nicht patchen, nur den Router-Affe Patch:

import { Router } from 'react-router-dom'; 
let previousLocation; 
const routerSetState = Router.prototype.setState; 
Router.prototype.setState = function(...args) { 
    const loc = this.props.history.location; 
    if (loc.pathname === previousLocation.pathname && 
     loc.search === previousLocation.search && 
     loc.hash  !== previousLocation.hash 
    ) { 
     previousLocation = {...loc}; 
     return; 
    } 

    previousLocation = {...loc}; 
    return routerSetState.apply(this, args); 
}; 
const routerDidMount = Router.prototype.componentDidMount; 
Router.prototype.componentDidMount = function(...args) { 
    previousLocation = { 
     ...this.props.history.location, 
    }; 
    if (typeof routerDidMount === 'function') { 
     return routerDidMount.apply(this, args); 
    } 
};