Previous pathname

[lasse-instructr]

What is the new or updated feature that you are suggesting?

We can get the current pathname through the useLocation() hook.

I want to get the pathname for the last page visited for the usage of a back button.

navigate(-1) does not suffice, as I need to know the previous route to decide whether or not it makes sense to navigate back to.

I have implemented a simple context for this purpose, but it would be nice if it was provided through React Router:

export interface IPreviousPageContextData {
  previousPathname: string | undefined
  /** Is true if the previous page has the same origin as the current page */
  previousPageIsAppPage: boolean
  /** Is true when the previous page is lower in the path-tree */
  previousPageIsShallower: boolean
}

const PreviousPageContext = createContext<IPreviousPageContextData | undefined>(undefined)

interface IPreviousPageProps {
  children: React.ReactNode;
}

const PreviousPageProvider: React.FC<IPreviousPageProps> = ({ children }) => {
  const [currentPathname, setCurrentPathname] = useState<string | undefined>(undefined)
  const [previousPathname, setPreviousPathname] = useState<string | undefined>(undefined)
  const { pathname: pathnameState } = useLocation()

  useEffect(() => {
    // Guard
    if (currentPathname !== window.location.pathname) {
      // Update pathname
      if (currentPathname !== undefined) {
        setPreviousPathname(currentPathname)
      }
      setCurrentPathname(window.location.pathname)
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pathnameState])

  const providerValue = useMemo(() => ({
    previousPageIsAppPage: previousPathname !== undefined,
    previousPageIsShallower: previousPathname !== undefined && previousPathname.length < window.location.pathname.length,
    previousPathname,
  }), [previousPathname])

  return (
  // This component will be used to encapsulate the whole App,
  // so all components will have access to the Context
    <PreviousPageContext.Provider value={providerValue}>
      {children}
    </PreviousPageContext.Provider>
  )
}
export {
  PreviousPageContext,
  PreviousPageProvider,
}

I hope that you get the gist of it.

Note: If the previous route was outside the app we will not have access to the pathname. In this case, I think that the state variable should return undefined.

Why should this feature be included?

I believe it is a common use case that you want to know the previous route.

[MatyCZ]

I need similar feature too, because workaround with setting prop state to the component <Link /> is in my case impossible.

I need to resolve redirecting from Page A to Page B and clicking on the browser Back button => there is no way how to set state to location and store previous pathname.

My current workaround is similar to @lasse-instructr, but causing unnecessary rerender.

[brophdawg11]

I'm going to convert this to a discussion so it can go through our new Open Development process. Please upvote the new Proposal if you'd like to see this considered!

[gage117]

Upvoted the proposal but also wanted to add my scenario to the mix. I have state that needs to be initialized or modified conditionally based on what route the user was redirected from. Being redirected from some paths means I initialize or modify state with specific values and while my workaround has worked fine but it's much much more cumbersome than just checking a from attribute and comparing it against some conditions. Instead I'm trying to make sure I add state={ from: pathName } in every single link that could possibly need it which means the logic is spread out over quite a few different files instead of just being located in a single function inside the component that requires knowledge of the previous path.

Hope to see something like this added in the future!

[Cam4dams]

+1 this would be a great addition

[happylolonly]

+1, also need this, surprising that this is not exists out the box

[guaijie]

一直在关注该讨论，现在已经 2024 了，官方还是没有给出积极的回复，这个功能应用的场景很多，希望官方能尽快给出解决方案，我希望能在原有的基础上新增 api

const { from } = useLoaction()