Route erkennen Änderung mit Reaktiv-Router

Question

Ich muss einige Geschäftslogik abhängig vom Browserverlauf implementieren.

Was ich will, ist, etwas zu tun wie folgt aus:

reactRouter.onUrlChange(url => { 
    this.history.push(url); 
}); 

Gibt es eine Möglichkeit, einen Rückruf zu empfangen reagieren-Router, wenn die URL aktualisiert wird?

Answer 1

Sie können die Funktion history.listen() verwenden, wenn Sie versuchen, die Routenänderung zu erkennen. Unter Berücksichtigung, dass Sie react-router v4 verwenden, wickeln Sie Ihre Komponente mit withRouter HOC, um Zugriff auf die history Prop zu erhalten.

history.listen() gibt eine unlisten Funktion zurück. Sie würden dies zu vom Zuhören verwenden.

:

Sie können Ihre Routen wie

index.js

ReactDOM.render(
     <BrowserRouter> 
      <AppContainer> 
        <Route exact path="/" Component={...} /> 
        <Route exact path="/Home" Component={...} /> 
      </AppContainer> 
     </BrowserRouter>, 
    document.getElementById('root') 
); 

und dann in AppContainer.js

class App extends Component { 

    componentWillMount() { 
    this.unlisten = this.props.history.listen((location, action) => { 
     console.log("on route change"); 
    }); 
    } 
    componentWillUnmount() { 
     this.unlisten(); 
    } 
    render() { 
    return (
     <div>{this.props.children}</div> 
    ); 
    } 
} 
export default withRouter(App); 

Aus der Geschichte docs konfigurieren

Sie können Änderungen an den aktuellen Standort hören mit history.listen:

history.listen((location, action) => { 
     console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`) 
    console.log(`The last navigation action was ${action}`) 
}) 

Die Lage Objekt eine Teilmenge der window.location Schnittstelle implementiert, darunter:

**location.pathname** - The path of the URL 
**location.search** - The URL query string 
**location.hash** - The URL hash fragment 

Standorte können auch haben die folgenden Eigenschaften:

location.state - Einige zusätzliche Zustand für diesen Ort, der in der URL befinden (in createBrowserHistory und createMemoryHistory unterstützt) nicht

location.key - Eine eindeutige Zeichenfolge diesen Standort darstellt (unterstützt in createBrowserHistory und createMemoryHistory)

Die Aktion ist eines von PUSH, REPLACE, or POP abhängig davon, wie der Benutzer an die aktuelle URL gelangt.

Wenn Sie reagieren-Router verwenden v3 Sie von history.listen() aus history Paket wie oben erwähnt, machen können, oder Sie können auch Gebrauch machen browserHistory.listen()

Sie können konfigurieren, und verwenden Sie Ihre Routen wie

import {browserHistory} from 'react-router'; 

class App extends React.Component { 

    componentDidMount() { 
      this.unlisten = browserHistory.listen(location => { 
       console.log('route changes'); 

      }); 

    } 
    componentWillUnmount() { 
     this.unlisten(); 

    } 
    render() { 
     return (
       <Route path="/" onChange={yourHandler} component={AppContainer}> 
        <IndexRoute component={StaticContainer} /> 
        <Route path="/a" component={ContainerA} /> 
        <Route path="/b" component={ContainerB} /> 
      </Route> 
     ) 
    } 
} 

machen

Answer 2

Wenn Sie das Objekt history global anhören möchten, müssen Sie es selbst erstellen und an die Router übergeben.Dann können Sie es mit seiner listen() Methode hören:

// Use Router from react-router, not BrowserRouter. 
import { Router } from 'react-router'; 

// Create history object. 
import createHistory from 'history/createBrowserHistory'; 
const history = createHistory(); 

// Listen to history changes. 
// You can unlisten by calling the constant (`unlisten()`). 
const unlisten = history.listen((location, action) => { 
    console.log(action, location.pathname, location.state); 
}); 

// Pass history to Router. 
<Router history={history}> 
    ... 
</Router> 

Noch besser, wenn man die Geschichte Objekt als ein Modul zu erstellen, so dass Sie leicht überall importieren Sie können es brauchen (zB import history from './history';