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

1 vote382 views1 answer
React counter input
Javascript React
0 vote527 views1 answer
React version on CMD
Javascript React
-1 vote350 views1 answer
React native toggle button with text
Javascript React
0 vote352 views1 answer
React 1 to 10 rating
Javascript React
0 vote362 views2 answers
Get location from brwoser react
Javascript React
0 vote329 views1 answer
React native run real device
Javascript React
4 votes436 views1 answer
Error Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class.
Javascript React
2 votes348 views1 answer
React router 404 redirect
Javascript React
0 vote328 views1 answer
Error: bundling failed: Error: Unable to resolve module react-native-community/toolbar-android
Javascript React
1 vote335 views1 answer
Press enter reaction js
Javascript React