Détecter le changement de route avec le routeur de réaction

- Je mettre en place une logique métier en fonction de l'historique de navigation.

Ce que je veux faire, c'est quelque chose comme ceci:

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

Est-il possible de recevoir un rappel de réagir-routeur lorsque l'URL est mis à jour?

source d'informationauteur Aris

  1. 22

    Vous pouvez faire usage de de l'histoire.listen() fonction lorsqu'on essaie de détecter le changement d'itinéraire. Vu que vous êtes en utilisant react-router v4enveloppez votre composant avec withRouter HOC pour obtenir l'accès à la history prop.

    history.listen() retourne un unlisten fonction. Vous devriez utiliser ceci pour unregister de l'écoute.

    Vous pouvez configurer vos routes, comme

    index.js

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

    puis dans 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);

    De l'histoire docs:

    Vous pouvez écouter pour que les modifications de la position actuelle à l'aide
    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}`)
})

    L'emplacement de l'objet implémente un sous-ensemble de la fenêtre.emplacement
    l'interface, y compris:

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

    Emplacements peuvent également avoir les propriétés suivantes:

    emplacement.état - partie supplémentaire de l'état pour cet endroit qui ne réside pas dans l'URL (pris en charge dans createBrowserHistory et
    createMemoryHistory)

    location.key - Une unique chaîne de caractères représentant de cette position (pris en charge
    dans createBrowserHistory et createMemoryHistory)

    L'action est l'un des PUSH, REPLACE, or POP en fonction de la façon dont l'utilisateur
    arrivés à l'URL courante.

    Lorsque vous êtes à l'aide de réagir-routeur v3 vous pouvez faire usage de history.listen() de history paquet comme mentionné ci-dessus ou vous pouvez également faire usage browserHistory.listen()

    Vous pouvez configurer et utiliser votre routes, comme

    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>
        )
    }
}
  2. 2

    Si vous voulez écouter le history objet à l'échelle mondiale, vous devrez les créer vous-même et de le passer à la Router. Ensuite, vous pouvez l'écouter avec son listen() méthode:

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

    Encore mieux si vous créez l'histoire de l'objet en tant que module, de sorte que vous pouvez facilement importer n'importe où vous pourriez en avoir besoin (par exemple, import history from './history';