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

0 vote135 views1 answer
React 5 to 10 rating
Javascript React
0 vote131 views1 answer
Start to work with a pre existing react projects
Javascript React
0 vote148 views1 answer
Export 'default' (imported as 'Redirect') was not found in 'react-router-dom'
Javascript React
0 vote167 views1 answer
Attempted import error: 'useDispatch' is not exported from 'react-redux'
Javascript React
6 votes178 views3 answers
Apply required attribute on input using ternary operator using react js
Javascript React
0 vote139 views1 answer
React component visibility
Javascript React
0 vote153 views1 answer
React native section list sort by alphabet
Javascript React
4 votes127 views2 answers
[!] CocoaPods could not find compatible versions for pod "ReactCommon/jscallinvoker": In Podfile: ReactCommon/jscallinvoker (from `../node_modules/react-native/ReactCommon`)
Javascript React
0 vote131 views1 answer
Stateprovider.js react
Javascript React
16 votes150 views1 answer
React native loop in render
Javascript React