React & Next.js — Bug: getting previous page's value from session storage

Question

In a React & Next.js app I'm trying to implement a back button. To do that I've added currentPath and prevPath to the session storage in the _app.js file.

// pages/_app.js
function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const storage = globalThis?.sessionStorage;
    if (!storage) return;
    
    storage.setItem('prevPath', storage.getItem('currentPath'));
    storage.setItem('currentPath', globalThis.location.pathname);
  }, [router.asPath]);

  return <Component {...pageProps} />
}

export default MyApp

Then I am trying to get this data in a Navigation.js component.

// Navigation.js
const router = useRouter();
const [prevPath, setPrevPath] = useState('/');

useEffect(() => {
  const getPrevPath = globalThis?.sessionStorage.getItem('prevPath');
  setPrevPath(getPrevPath);
}, [router.asPath]);

return (
  // …
  <Link href={prevPath || '/'}>
    <a>Back</a>
  </Link>
  //…
)

While the session storage works correctly, the value returned is one from the previous page (that is previous page's prevPath) instead of the current one. Technically, asking for a currentPath instead of a prevPath would be the solution to what I'm trying to do but I'd like to (learn to) do it the right way.

Additional info:
I've tried to get data with async/await but it didn't make any difference.

useEffect(async () => {
  const getPrevPath = await globalThis?.sessionStorage.getItem('prevPath');
  setPrevPath(getPrevPath);
}, [router.asPath]);

Also, earlier in a day (the implementation was different) I've tried as an experiment adding a delay of 1/1000th of a second and it did make it work correctly. Given that, I'm not confident waiting a fixed number of seconds (or a fixed fraction of a second) would be a good solution (could someone confirm?).

Would appreciate the help.

Answer 1

Problem

I'm assuming you want to add and remove history (similar to a real browser history) instead of just constantly replacing the history with whatever route was previous. Instead of constantly replacing the pathname upon a route change, you'll want to conditionally add/remove it from some sort of history.

Solution

Here's a hook that utilizes an Array (basically a flat array of asPath strings -- you may want to limit the size of the Array to prevent performance issues):

import * as React from "react";
import { useRouter } from "next/router";

const usePreviousRoute = () => {
  const { asPath } = useRouter();
  // initialize history with current URL path
  const [history, setHistory] = React.useState([asPath]);
  const lastHistoryIndex = history.length - 2;
  // get second to last route in history array
  const previousRoute = history[lastHistoryIndex > 0 ? lastHistoryIndex : 0];

  const removeHistory = () => {
    // get current history
    setHistory((prevHistory) =>
      // check if the history has more than 1 item
      prevHistory.length > 1
          // if it does, remove the last history item
        ? prevHistory.filter((_, index) => index !== prevHistory.length - 1)
          // else don't remove any history
        : prevHistory
    );
  };

  React.useEffect(() => {
     // get current history
    setHistory((prevHistory) =>
       // check if the last history item is the current path
      prevHistory[prevHistory.length - 1] !== asPath
        // if not, add current path to history
        ? [...prevHistory, asPath]
        // else don't add any history
        : prevHistory
    );
  }, [asPath]);

  return { previousRoute, removeHistory };
};

export default usePreviousRoute;

With capped history:

  React.useEffect(() => {
    // get current history
    setHistory((prevHistory) =>
      // check if last history item is current path
      prevHistory[prevHistory.length - 1] !== asPath
      // if not...
        ? [
            // check if history has more than 10 items
            // spread result into shallow copied array
            ...(prevHistory.length > 9
              // if it does have more than 10 items, remove first item
              ? prevHistory.filter((_, index) => index !== 0)
              // else don't remove history
              : prevHistory),
            asPath
          ]
        // else don't remove history
        : prevHistory
    );
  }, [asPath]);

Demo

Source Code:

Browser Demo URL: https://knfoj.sse.codesandbox.io/

Demo Code

Navigation.js

/* eslint-disable jsx-a11y/anchor-is-valid */
import * as React from "react";
import Link from "next/link";
import { useHistoryContext } from "../../hooks/useRouteHistory";
import GoBackLink from "../GoBackLink";
import styles from "./Navigation.module.css";

const Navigation = () => {
  const { history } = useHistoryContext();

  return (
    <>
      <nav className={styles.navbar}>
        {[
          { title: "Home", url: "/" },
          { title: "About", url: "/about" },
          { title: "Example", url: "/example" },
          { title: "NoLayout", url: "/nolayout" }
        ].map(({ title, url }) => (
          <Link key={title} href={url} passHref>
            <a className={styles.link}>{title}</a>
          </Link>
        ))}
      </nav>
      <GoBackLink />
      <div className={styles.history}>
        <h4 style={{ marginBottom: 0 }}>History</h4>
        <pre className={styles.code}>
          <code>{JSON.stringify(history, null, 2)}</code>
        </pre>
      </div>
    </>
  );
};

export default Navigation;

useRouteHistory.js

import * as React from "react";
import { useRouter } from "next/router";

export const HistoryContext = React.createContext();
export const useHistoryContext = () => React.useContext(HistoryContext);

export const usePreviousRoute = () => {
  const { asPath } = useRouter();
  const [history, setHistory] = React.useState([asPath]);
  const lastHistoryIndex = history.length - 2;
  const previousRoute = history[lastHistoryIndex > 0 ? lastHistoryIndex : 0];

  const removeHistory = () => {
    setHistory((prevHistory) =>
      prevHistory.length > 1
        ? prevHistory.filter((_, index) => index !== prevHistory.length - 1)
        : prevHistory
    );
  };

  React.useEffect(() => {
    setHistory((prevHistory) =>
      prevHistory[prevHistory.length - 1] !== asPath
        ? [...prevHistory, asPath]
        : prevHistory
    );
  }, [asPath]);

  return { history, previousRoute, removeHistory };
};

export const HistoryProvider = ({ children }) => {
  const historyProps = usePreviousRoute();

  return (
    <HistoryContext.Provider
      value={{
        ...historyProps
      }}
    >
      {children}
    </HistoryContext.Provider>
  );
};

export default HistoryProvider;

_app.js

import * as React from "react";
import HistoryContext from "../hooks/useRouteHistory";

const App = ({ Component, pageProps }) => (
  <HistoryContext>
    <Component {...pageProps} />
  </HistoryContext>
);

export default App;

index.js

import Layout from "../components/Layout";

const IndexPage = () => (
  <Layout>
    <h1>Index Page</h1>
    <p>
     ...
    </p>
  </Layout>
);

export default IndexPage;