How to reset location state in react router

user_4962412 0
Viewed 38203

I am following react-router docs to create a protected route HOC and for unauthenticated requests I am Redirecting the user as following :

<Redirect to={{
  pathname: '/input-number',
  state: { from: props.location },
}} />

Now on the redirected component, I show an error message using the following logic :

      this.props.location.state && this.props.location.state.from &&
      (
        <Grid.Row>
          <Grid.Column>
            <Message negative>
              <Message.Header>You must be logged in to visit the page</Message.Header>
            </Message>
          </Grid.Column>
        </Grid.Row>
      )

The problem is when the user reloads, the page the state associated with the location is not cleared and the error message is shown on each refresh once user has been redirected to the login component. I am looking for a way to clear the state. I think it must be possible without setting some app state.

UPDATE : I am adding the complete PrivateRoute for clarity:

`

export default function PrivateRoute({ component: Component, ...rest }) {
  const isAuthenticated = localStorage.getItem(ACCESS_TOKEN);
  return (
    <Route
      {...rest}
      render={props => (
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to={{
            pathname: '/input-number',
            state: { from: props.location },
          }}
          />
        )
      )}
    />);
}

`

react-router reactjs javascript
3 Answers

When creating the history object for your <Router> during the initial setup of the React app, you could replace the state on the history's location with a state that does not include the from prop.

const history = createHistory();
if (history.location && history.location.state && history.location.state.from) {
  const state = { ...history.location.state };
  delete state.from;
  history.replace({ ...history.location, state });
}
user_84800880

Also, it is possible to replace the state without merging location it statys untouched:

const { state } = this.props.location;
if (state && state.copySurveyId) {
  this.duplicateSurvey(state.copySurveyId);
  const stateCopy = { ...state };
  delete stateCopy.copySurveyId;
  this.props.history.replace({ state: stateCopy });
}
user_72723490

This might not be the most ideal approach but in my case the easiest way to deal with this was to use history.replace() and replace the current URL with the same URL but omitting location location state object (should work for params too). However you have to be careful and only replace the URL AFTER you have consumed the value of location state object or params. In my case:

// Somwhere in the app:

    history.push("to/app/route", {
      contentOfLocationState: true
    });

// In the component that is mapped to above route

function (){
    try {
      // Post to API
      Post(...{ contentOfLocationState });
    } catch (e) {
      // error
    } finally {
      history.replace("to/app/route");
    }

PS: Using the technique that @robert-farley described react router would start acting up and show white screen for me. Might have been something wrong with my setup though

user_10754990
Related