Getting previous page from current location

[proxict]

Let me preface this by expressing big thanks for this amazing, very light-weight router that perfectly fits my embedded application, and by saying that I'm a complete UI/web-tech analphabet so I apologize in advance if this is a stupid question.

I use the wouter-preact package and I've been trying to figure out a way to reliably get the previous location whence the user came to the current location/route.

Reading the docs, I see the Router object has a hook prop that I can use to know when the route changes. But no matter what I try, I run into recursion and other types of errors. I tried this example code, but it seems it's incompatible with the newer wouter versions.

After literally a day of banging my head against the wall (I warned you, I'm really bad with this frontend stuff), I managed to hack it together using this component:

import { useLocation } from 'wouter-preact';
import { useEffect, useRef } from 'preact/hooks';

let gPrevLocation = null;

export const LocationTracker = () => {
    const [location] = useLocation();
    const lastLocation = useRef(location);

    useEffect(() => {
        if (lastLocation.current !== location) {
            gPrevLocation = lastLocation.current;
            lastLocation.current = location;
        }
    }, [location]);

    return null;
}

export const getPreviousLocation = () => {
    return gPrevLocation;
}

and sticking it at the top of the Router:

<Router>
    <LocationTracker />
    <Route path="/wifi" component={Wifi} />
    <Route path="/ap" component={AccessPoint} />
    <Route path="/settings" component={Settings} />
    <Route path="/login" component={Login} />
</Router>

But this seems very hacky and I'd like to learn the proper way of going about it.

And to avoid the XY problem, I'm trying to get the previous location to be able to redirect the user from my login page back to where they came from when they get redirected to /login after requesting a protected route without being authenticated.

Could someone please give me some pointers? Thank you!

Related:

• Previous url in the navigation of the website #115

Possibly related:

• How do I go back to previous page? #463

[proxict]

I managed to solve it by creating a new context with the previous location:
LocationHistoryProvider.jsx:

import { createContext } from "preact";
import { useState, useEffect, useRef } from "preact/hooks";
import { useBrowserLocation } from "wouter-preact/use-browser-location";

const LocationHistoryContext = createContext({
    location: null,
    navigate: (to, { replace = false, state = null } = {}) => {},
    previousLocation: null,
});

// https://github.com/molefrog/wouter/issues/115#issuecomment-619950755
const usePreviousLocation = (opts = {}) => {
    const [location, navigate] = useBrowserLocation(opts);
    const [prevLocation, setPrevLocation] = useState(null);
    const lastSavedLocation = useRef(null);

    useEffect(() => {
        setPrevLocation(lastSavedLocation.current);
        lastSavedLocation.current = location;
    }, [location]);

    return [location, navigate, prevLocation];
};

export const LocationHistoryProvider = ({ children }) => {
    const [location, navigate, previousLocation] = usePreviousLocation();
    return (
        <LocationHistoryContext.Provider value={{ location, navigate, previousLocation }}>
        {children}
        </LocationHistoryContext.Provider>
    );
};

export default LocationHistoryContext;

useLocationHistory.jsx:

import { useContext } from "preact/hooks";

import LocationHistoryContext from "../context/LocationHistoryProvider";

const useLocationHistory = () => {
    return useContext(LocationHistoryContext);
}

export default useLocationHistory;

My main application component:

const Application = () => {
    return (
        <ToastProvider>
        <AuthProvider>
        <LocationHistoryProvider>
        <Switch>
            <Route path="/wifi" component={Wifi} />
            <Route path="/ap" component={AccessPoint} />
            <Route path="/settings" component={Settings} />
            <Route path="/login" component={Login} />
        </Switch>
        </LocationHistoryProvider>
        </AuthProvider>
        </ToastProvider>
    );
};

And the usage in my Login component:

const { location, navigate, previousLocation } = useLocationHistory();
const from = previousLocation || "";
    
const onSubmit = async (event) => {
    ...
    navigate(from, {replace: true});
    ...
};

I have no idea if this is the right approach, if it's efficient, but it gets the job done now. Maybe it helps someone who's looking for a similar functionality.

[molefrog]

I apologize in advance if this is a stupid question

There are no stupid questions! If I got the question right here is how I would solve this:

// PreviousLocationProvider.jsx
import { createContext, useContext } from "react";
import { useLocation } from "wouter";
import { usePrevious } from "@uidotdev/usehooks";

const PreviousLocationContext = createContext(null);

export const PreviousLocationProvider = ({ children }) => {
  const [location] = useLocation();
  const prevLocation = usePrevious(location);

  return (
    <PreviousLocationContext.Provider value={prevLocation}>
      {children}
    </PreviousLocationContext.Provider>
  );
};

export const usePreviousLocation = () => {
  return useContext(PreviousLocationContext);
};

Make sure that PreviousLocationProvider comes after Router component.

[molefrog]

It uses this hook: https://usehooks.com/useprevious

[proxict]

Thanks for the response! That's much cleaner indeed :)

Though, yesterday evening, I realized that wouter (probably you in particular) has already thought of it and offers an even more elegant way to solve my problem. Turns out, I can actually use the state property on the Redirect function and the analogous state object on the navigate() function returned from useLocation().

I had come across it in the docs multiple times, but had not realized until yesterday evening that I could use it for this purpose.

So I was ultimately able to get rid of the LocationHistoryProvider and now, I pass the previous (or at that point still current) location like this:

Via the Redirect function:

const ProtectedRoute = (props) => {
    const { auth } = useAuth();
    const [location, _navigate] = useLocation();

    return (
        auth?.user
            ? <Route {...props} />
            : <Redirect to="/login" state={{ from: location }} replace />
    );
};

Via the navigate function:

navigate('/login', { replace: true, state: { from: location } });

And in my Login component, I get the location where the user came from like this:

const Login = () => {
    ...
    const [_location, navigate] = useLocation();
    const from = history?.state?.from || "";
    ...

But it's nice to have other alternatives!