Want to debug React Router? You can wrap your Router with a DebugRouter which will print the navigation actions made:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Login from 'components/Login' import DefaultComponent from 'components/DefaultComponent' class DebugRouter extends Router { constructor(props){ super(props); console.log('initial history is: ', JSON.stringify(this.history, null,2)) this.history.listen((location, action)=>{ console.log( `The current URL is ${location.pathname}${location.search}${location.hash}` ) console.log(`The last navigation action was ${action}`, JSON.stringify(this.history, null,2)); }); } } class App extends Component { render() { return ( <DebugRouter> <Switch> <Route exact path="/login" name="Login Page" component={Login} /> <Route path="/" name="Home" component={DefaultComponent} /> </Switch> </DebugRouter> ); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
