Category: React Answers

Sometimes, we want to set up Google Analytics for React Router.

In this article, we’ll look at how to set up Google Analytics for React Router.

How to set up Google Analytics for React Router?

To set up Google Analytics for React Router, we can create our own hook to submit data to Google Analytics.

For instance, we write

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import ReactGA from "react-ga";

const usePageTracking = () => {
  const location = useLocation();

  useEffect(() => {
    ReactGA.initialize("UA-000000000-0");
    ReactGA.pageview(location.pathname + location.search);
  }, [location]);
};

export default usePageTracking;

to create the usePageTracking hook that calls the useLocation hook to get the current location.

And then we listen to location with the useEffect hook and calls ReactGA.initialize to initialize Google Analytics.

And then we call ReactGA.pageview with the full URL which we get with location.pathname + location.search.

Conclusion

To set up Google Analytics for React Router, we can create our own hook to submit data to Google Analytics.

Sometimes, we want to use React Router without changing the URL.

In this article, we’ll look at how to use React Router without changing the URL.

How to use React Router without changing the URL?

To use React Router without changing the URL, we can use the MemoryRouter component.

For instance, we write

import { MemoryRouter } from 'react-router'

<MemoryRouter>
  <App/>
</MemoryRouter>

to import the MemoryRouter component and then wrap it around App to let us navigate with React Router without changing URLs.

Conclusion

To use React Router without changing the URL, we can use the MemoryRouter component.

Sometimes, we want to fix React Router v4 routes not working.

In this article, we’ll look at how to fix React Router v4 routes not working.

How to fix React Router v4 routes not working?

To fix React Router v4 routes not working, we may need the exact prop to make React Router search for an exact path match.

For instance, we write

<Route exact path="/" component={Home} />;

to add the exact prop so that going to / will render the Home component.

Conclusion

To fix React Router v4 routes not working, we may need the exact prop to make React Router search for an exact path match.

Sometimes, we want to wait for an async action before route transition with React Router.

In this article, we’ll look at how to wait for an async action before route transition with React Router.

How to wait for an async action before route transition with React Router?

To wait for an async action before route transition with React Router, we can create our own hook that calls history.push when our action is done.

For instance, we write

export const useBlock = (func) => {
  const { block, push, location } = useHistory();
  const lastLocation = useRef();

  const funcRef = useRef();
  funcRef.current = func;

  useEffect(() => {
    if (location === lastLocation.current || !funcRef.current) {
      return;
    }

    lastLocation.current = location;

    const unblock = block((location, action) => {
      const doBlock = async () => {
        if (!(await funcRef.current(location, action))) {
          unblock();
          push(location);
        }
      };
      doBlock();
      return false;
    });
  }, [location, block, push]);
};

to create the useBlock hook that calls useEffect with a function that calls block if lastLocation.current isn’t the same as location.

In the block callback, we check if the funcRef.current function returns a value

If it’s doesn’t return a value, we call unblock and push to do the navigation.

Then we use it by writing

const Comp = () => {
  useBlock(async (location) => await fetchShouldBlock(location));

  return <span>Hello</span>;
};

to call useBlock with the async function we want to run before navigation.

Conclusion

To wait for an async action before route transition with React Router, we can create our own hook that calls history.push when our action is done.

Sometimes, we want to mock the useHistory hook in Jest.

In this article, we’ll look at how to mock the useHistory hook in Jest.

How to mock the useHistory hook in Jest?

To mock the useHistory hook in Jest, we can call jest.mock with a function to return the return value of useHistory.

For instance, we write

jest.mock("react-router-dom", () => ({
  useHistory: () => ({
    push: jest.fn(),
  }),
}));

to call jest.mock to mock the react-router-dom module and a callback.

In the callback, we return an object that has the useHistory property set to a function that returns the object we want.

We mock the push method by setting it to jest.fn.

Conclusion

To mock the useHistory hook in Jest, we can call jest.mock with a function to return the return value of useHistory.