Category: React

Sometimes, we want to use React Router with Electron.

In this article, we’ll look at how to use React Router with Electron.

How to use React Router with Electron?

To use React Router with Electron, we can use HashRouter.

For instance, we write

import { HashRouter, Route } from "react-router-dom";

to import HashRouter.

Then we write

<HashRouter>
  <div>
    <Route path="/" exact component={Home} />
    <Route path="/firstPage" component={FirstPage} />
    <Route path="/secondPage" component={SecondPage} />
  </div>
</HashRouter>

to wrap HashRouter around our Routes to render them.

HashRouter works because Electron runs our React app in a file-based environment.

Conclusion

To use React Router with Electron, we can use HashRouter.

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.