React-router-dom (v6) go back only within application

Question

Is there a built-in way in react-router-dom v6, to go back to the previous page, BUT in case the previous page is out of the context of the application, to route to the root and to thus not out of the application.

Example: I surf to a www.thing.com/thingy from www.google.com, this page (www.thing.com/thingy) has a go back button on it => when I click on the go back button => I am redirected to www.google.com instead of the wanted behaviour a redirect to www.thing.com. Mockup of an example page.

I have tried several implementations and searched through the documentation but couldn't find a built-in way to resolve this. As far as I can see there isn't a way. I can however make something custom to resolve my issue if its not.

Don't change the default and expected back navigation behavior. Don't try to "trap" users in your app/page. This would generally be considered poor UX. This said, does something like this help answer your question? https://stackoverflow.com/a/72997654/8690857 It will only work in pre-RRDv6.4 installations since RRDv6.4 abstracted the history object further. — Drew Reese, Nov 18 '22 at 16:35
I made something similar already to stackoverflow.com/a/72997654/8690857 to improve upon the default behaviour. Also, from a user perspective its not trapping but rather expected, see my mockup. Thanks for the help! — Agrendallan, Nov 21 '22 at 10:23
If you are preventing users from navigating *back* to a page they were on prior to navigating *into* your app, you are changing the default back behavior and this is most certainly unexpected behavior. Since Stackoverflow isn't a code writing service can you share a [mcve] for what you are trying to do here? — Drew Reese, Nov 21 '22 at 17:03
@alex's answer is pretty much a minimal reproducible example. I'm not preventing them within the application to go back to their previous page. But rather WHEN, and only when, they haven't been on a previous page in your application and route directly to a page within your application with a `navigate(-1)` button on it. When you click that button, it leads to the previous page, yes, but outside of the application, the page they came from initially before loading into your application — Agrendallan, Nov 22 '22 at 14:32
I don't understand the question and issue then. You just want to issue a back navigation in response to clicking a button? Is the question asking how to use the `useNavigate` hook and `navigate` function? https://reactrouter.com/en/main/hooks/use-navigate — Drew Reese, Nov 22 '22 at 17:07

score 1 · Answer 1 · answered Nov 18 '22 at 13:25

1

import { useNavigate } from 'react-router-dom';

function YourApp() {
  const navigate = useNavigate();

  return (
    <>
      <button onClick={() => navigate(-1)}>go back</button>
    </>
  );
}

answered Nov 18 '22 at 13:25

Alex

118
7

This is the default behaviour of going back to the previous page. Please take a look at this [example page](https://imgur.com/a/UKfik0q). – Agrendallan Nov 21 '22 at 10:12

score 0 · Accepted Answer · answered Jan 19 '23 at 10:08

I solved it by keeping track of the history.

If a user had not yet been on the page, I redirect them to the homepage. Else redirect them to the previous page.

import {
  useEffect
} from 'react';
import {
  createContext,
  useMemo,
  useState
} from 'react';
import {
  useLocation
} from 'react-router-dom';

export const LocationHistoryContext = createContext({});

const LocationHistoryProvider = ({
  children
}) => {
  const [locationHistory, setLocationHistory] = useState(
    new Set(),
  );

  const location = useLocation();

  useEffect(() => {
    // if pathname has changed, add it to the history
    let path = location.pathname.match(/^\/([^/])*/)[0];
    setLocationHistory((prev) => new Set([path, ...prev]));
  }, [location.pathname, location]);

  const context = useMemo(() => {
    return {
      /* if the user has visited more than one page */
      hasHistory: locationHistory.size > 1,
    };
  }, [locationHistory]);

  return ( <
    LocationHistoryContext.Provider value = {context}>
    {
      children
    }
</LocationHistoryContext.Provider>
  );
};

export default LocationHistoryProvider;

React-router-dom (v6) go back only within application

2 Answers2