CODEWITHSUNDEEP
javascriptreactjsecmascript-6react-router
ted
ted

Reputation: 14744

Check history previous location before goBack() react router v4

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.

Upvotes: 50

Views: 82505

Answers (2)

lissettdm
lissettdm

Reputation: 13078

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>

Upvotes: 6

Shubham Khatri
Shubham Khatri

Reputation: 281754

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

Upvotes: 54

Related Questions