Détecter les changements de Route avec react-router
je dois mettre en œuvre 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);
});
y a-t-il un moyen de recevoir un appel de react-router lorsque L'URL est mise à jour?
2 réponses
Vous pouvez faire usage de history.listen() fonction lors de la détection du changement de route. Considérant que vous utilisez react-router v4, enveloppez votre composant withRouter HOC pour obtenir l'accès à l' history prop.
history.listen() retourne un unlisten fonction. Vous pouvez utiliser cette unregister à partir 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);
l'histoire docs:
vous pouvez écouter les changements à l'emplacement actuel en utilisant
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'objet location 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 fragmentles localisations peuvent aussi avoir les propriétés suivantes:
emplacement.état - un état supplémentaire pour ceci emplacement qui ne réside pas dans L'URL (pris en charge dans
createBrowserHistoryetcreateMemoryHistory)
location.key- une chaîne unique représentant cet emplacement (supportéecreateBrowserHistoryetcreateMemoryHistory)l'action est L'un des
PUSH, REPLACE, or POPselon la façon dont l'utilisateur arrivés à l'URL courante.
Lorsque vous utilisez réagir-routeur v3, vous pouvez utiliser history.listen()history package comme mentionné ci-dessus ou vous pouvez également utiliser browserHistory.listen()
Vous peut configurer et utiliser vos 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>
)
}
}
Si vous voulez écouter le history objet globalement, vous devrez le créer vous-même et 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'objet history comme un module, de sorte que vous pouvez facilement l'importer n'importe où vous pourriez en avoir besoin (par exemple import history from './history';