How to debug React Router? - hyperlink

Question

I'm trying to use React Router in my react app which is bounded as wordpress plugin and uses flux to fetch api data.
my entry point looks as it follows
import React from 'react';
import Workshops from './components/workshops';
import Workshop from './components/workshop';
import NotFound from './components/notfound';
import Router, { Route, DefaultRoute, NotFoundRoute, Redirect, Link } from 'react-router';
import json from './config.json';
localStorage.clear();
localStorage.setItem('workshops', JSON.stringify(json));
const AppRoutes = (
<Route path="/" handler={Workshops}>
<DefaultRoute handler={Workshop} />
<Route name="workshop" path=":slug" handler={Workshop}/>
<NotFoundRoute handler={NotFound} />
</Route>
);
Router.run(AppRoutes, Router.HashLocation, (Root) => {
React.render(<Root />, document.getElementById('workshop-booker'));
});
than in my Workshops component I make some links to a given route, I have hash changes but the routed component does not getting fired.
<h3> <Link to="workshop" params={{slug: workshop.slug }}> {workshop.title.rendered }</Link></h3>

Answer 1

You can wrap your Router with a DebugRouter which will print the navigation actions made:
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>
);
}
}
link to the gist

Answer 2

I made my DebugRouter for functional components
const DebugRouter = ({ children }: { children: any }) => {
const { location } = useHistory()
if (process.env.NODE_ENV === 'development') {
console.log(
`Route: ${location.pathname}${location.search}, State: ${JSON.stringify(location.state)}`,
)
}
return children
}
const Router = () => {
return (
<BrowserRouter>
<Layout>
<Route
render={() => {
return (
<DebugRouter>
<Switch>
<Redirect exact from="/" to={...} />
// <Route/> should be here
<Redirect from="*" to={...} />
</Switch>
</DebugRouter>
)
}}
/>
</Layout>
</BrowserRouter>
)
}

Answer 3

You can try something like this
import React, {Component} from 'react';
import PropTypes from 'prop-types'
import {withRouter} from "react-router-dom";
class RouterDebugger extends Component {
componentWillUpdate(nextProps, nextState){
console.log('componentWillUpdate',nextProps, nextState)
}
componentDidUpdate(prevProps) {
console.log('componentDidUpdate',prevProps)
}
render() {
return null
}
}
export default withRouter(RouterDebugger)
And insert this component in any place you want to debug.
You can pass a prop with some identifier
i hope this help you

Answer 4

You can use the following code to debug React Router:
console.log(this.props.location)
console.log(this.props.match)