Debug react routes

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Login from 'components/Login'
import DefaultComponent from 'components/DefaultComponent'

class DebugRouter extends BrowserRouter {
  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>
    );
  }
}

Source: stackoverflow.com

Similar codes

9 votes297 views3 answers
React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Javascript React
0 vote336 views1 answer
How to show content-type:image/jpg in react
Javascript React
1 vote310 views1 answer
Minimum flatlist size react native
Javascript React
0 vote333 views1 answer
How to resolve click for div logging as parent too, in react
Javascript React
0 vote321 views1 answer
Flipper semantic issue react native
Javascript React
2 votes280 views1 answer
Yarn create react-app test00h00m00s 0/0: : ERROR: [Errno 2] No such file or directory: 'create'
Javascript React
133 votes461 views6 answers
Using bootstrap with react
Javascript React
0 vote325 views1 answer
React.createElement
Javascript React
0 vote338 views2 answers
React native countdown
Javascript React
0 vote327 views1 answer
React string to integer
Javascript React