Check history previous location before goBack() react router v4

35
votes

My goal is to enable a "Go Back" button, but only if the route/path the user would go back to is in a certain category.

More precisely I have two kinds of Routes : /<someContent> and /graph/<graphId>. When the user navigates between graphs they should be able to go back to the previous graph but not to a /... route. This is why I can't simply run history.goBack(), I need to check the location first.

const history = createHashHistory();
const router = (
        <ConnectedRouter history={history}>
            <Switch>
                <Route exact path='/' component={Home}></Route>
                <Route exact path='/extension' component={Home}></Route>
                <Route exact path='/settings' component={Home}></Route>
                <Route exact path='/about' component={Home}></Route>
                <Route exact path='/search' component={Home}></Route>
                <Route exact path='/contact' component={Home}></Route>
                <Route path='/graph/:entityId' component={Graph}></Route>
            </Switch>
        </ConnectedRouter>
);

I'd like to implement something like this in the Graph component:

if (this.props.history.previousLocation().indexOf('graph') > -1){
    this.props.history.goBack();
} else {
    this.disableReturnButton();
}

This question also applies to goForward() as I'd like to disable the "forward" button if not applicable. Also the user moves around with this.props.history.push(newLocation)

Obviously I'd like to avoid using side-tricks like logging in localStorage or a redux store as the user moves around, it feels less natural and I know how to do it.

2
javascriptreactjsecmascript-6react-router
If your history is backed by window.history, you can't see what is behind .back() or .forward() 😫. I'm not sure if hash history is implemented the same way, but I'm quite certain it has the same API, so no luck. I think keeping a shadow copy of history in-memory (your redux store idea), is the most pragmatic way. – Dima Tisnek

2 Answers

35
votes

While navigating though the Link component or even though history.push, you could pass the current location to another Route component

like

<Link to={{pathname: '/graph/1', state: { from: this.props.location.pathname }}} />

or

history.push({
  pathname: '/graph/1',
  state: { 
      from: this.props.location.pathname
  }
})

and then you could just get this location in your Component like this.props.location.state && this.props.location.state.from and then decide whether you wan't to goBack or not

3
votes

Using context you can store the previous location pathname:

const RouterContext = React.createContext();

const RouterProvider = ({children}) => {
  const location = useLocation()
  const [route, setRoute] = useState({ //--> it can be replaced with useRef or localStorage
    to: location.pathname,
    from: location.pathname
  });

  useEffect(()=> {
    setRoute((prev)=> ({to: location.pathname, from: prev.to}) )
  }, [location]);
  
  return <RouterContext.Provider value={route}>
    {children}
  </RouterContext.Provider>
}

Then, in some component under RouterProvider:

const route = useContext(RouterContext);

 //...
 <Link to={route.from}>
     Go Back
 </Link>