Debug react-router routings

App.jsx

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>
    );
  }
}

Where does history come from? Please advice.

It is a member of BrowserRouter class.
https://github.com/ReactTraining/react-router/blob/v5.2.0/packages/react-router-dom/modules/BrowserRouter.js#L11

It is a member of BrowserRouter class.
https://github.com/ReactTraining/react-router/blob/v5.2.0/packages/react-router-dom/modules/BrowserRouter.js#L11

Thank you. Got it.

I am using typescript and typescript compiler gives error here, saying -
TS2605: JSX element type 'DebugRouter' is not a constructor function for JSX elements.
Property 'render' is missing in type 'DebugRouter'.

Any suggestions?

I am using typescript and typescript compiler gives error here, saying -
TS2605: JSX element type 'DebugRouter' is not a constructor function for JSX elements.
Property 'render' is missing in type 'DebugRouter'.

Any suggestions?

Could you show how you use DebugRouter?

I used the same code from above. But the issue got fixed. Apparently it needed a type declaration for react-router-dom. So on including "@types/react-router-dom" in package.json as a devDependency, and running "npm install", it got fixed.

For TypeScript I get
Property 'history' does not exist on type 'DebugRouter'.ts(2339)

Any suggestions? Using react-router-dom v5.2.0.

Edit: Used useHistory to get history object instead.

Here is the hacky way to use this with a Typescirpt based project.

1. Create DebugRouter.jsx file.
2. Copy & Paste these codes.

import {BrowserRouter} from "react-router-dom";

// noinspection JSUnresolvedVariable
export 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));
        });
    }
}

• Basically you have to ignore ts-lint error.