Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to debug React Router?

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> 
like image 601
fefe Avatar asked Dec 04 '15 17:12

fefe


People also ask

How do I debug in Reactjs?

When debugging a React app, I often find breakpoints to be very helpful. There are two main ways in which we can use them: By writing the debugger statement in our source code. By clicking on a specific line of the code in the Chrome web browser (or Firefox, Edge, etc.)

How do I add a 404 page to my React Router?

An alternative way to handle 404 page not found in React router is to redirect the user to a different page when they try to go to a page that doesn't exist. Copied! In the example, instead of rendering a PageNotFound component, we redirect the user to / if they go to a route that doesn't exist. Copied!

How do you debug test cases in React?

Line 18 is a must to use Chrome DevTools for debugging unit test cases. Here the executable is react-app-rewired . It can be invoked by typing npm run test:debug .


1 Answers

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

like image 100
Moshe Malka Avatar answered Sep 22 '22 11:09

Moshe Malka