Debug Routes with Navigate/Routes

Question

In a previous question I said I was following this tutorial, it should be an easy one.

But the tutorial might be quite old, it uses Switch and Redirect. I am trying to use it with the new Routes and Navigate... but it displays a blank screen by just renaming them.

So I have searched about debugging routes but I cannot make the answers to work. Of course, I might be missing something and possibly even trivial here.

Since I am learning React, I almost copy verbatim, with very few cosmetic touches:

import React from "react"
import TextEditor from "./TextEditor"
import { 
  BrowserRouter,
  Routes,
  Route,
  Navigate
} from "react-router-dom"
import { v4 as uuidV4 } from "uuid"

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

function App() {
  return (
    <DebugRouter>
      <Routes>
        <Route path="/" exact>
          <Navigate to={`/documents/${uuidV4()}`} />
        </Route>
        <Route path="/documents/:id">
          <TextEditor />
        </Route>
      </Routes>
    </DebugRouter>
  );
}

export default App;

Now I get three errors, but they are all the same, and I don't know why it throws three times in the same line...

TypeError: Cannot call a class as a function in _classCallCheck

The line is:

export default function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

I am not even remotely skilled in react to understand why it goes berserk, when using the DebugRouter I found in another question on how to debug. The culprit, says the log, is here:

DebugRouter
src/App.js:12
   9 | import { v4 as uuidV4 } from "uuid"
  10 | 
  11 | class DebugRouter extends BrowserRouter {
> 12 |   constructor(props){
  13 |       super(props);
  14 |       console.log('initial history is: ', JSON.stringify(this.history, null,2))
  15 |       this.history.listen((location, action)=>{

If you need to know what happens exactly when I use the BrowserRouter, the blank page HTML is here. Nothing fancy, it seems that the routes do not work at all.

Am I missing something in upgrading the tutorial to a more up-to-date react?

Answer 1

The BrowserRouter isn't a React, or even Javascript, Class component, so it can't be extended, it's a React function component. From what I see here it seems you just want to "spy" on the location object when routes change.

Create a layout route component that uses the useLocation and useNavigationType hooks and a useEffect hook to "listen" for location changes and log out the details.

Example:

import { Outlet, useLocation, useNavigationType } from 'react-router-dom';

const DebugLayout = () => {
  const location = useLocation();
  const navigationType = useNavigationType(); // "POP" | "PUSH" | "REPLACE"

  React.useEffect(() => {
    console.log("The current URL is", {...location});
    console.log("The last navigation action was", navigationType);
  }, [location, navigationType]);

  return <Outlet />;
};

export default DebugLayout;

Import and render DebugLayout as a layout route. Also FYI, the routed components should be passed to each Route component's element prop. Only other Route components are valid children in the case of nesting routes.

...
import DebugLayout from '../path/to/DebugLayout';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<DebugLayout />}>
          <Route path="/" element={<Navigate to={`/documents/${uuidV4()}`} />} />
          <Route path="/documents/:id" element={<TextEditor />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}