keep url query after refreshing the page

Question

In my app, if the user goes to

http://localhost:3000/#/auth

The sign in page will render by default.

When the user goes to the signup page, the url is

http://localhost:3000/#/auth?form=signup

However, whenever I refresh the page, the url automatically goes back to

http://localhost:3000/#/auth

And the user now sees the sign-in page.

Is there a way to keep the url queries after a refresh? In other words, if the user is on the signup page and refreshes, I want to render the signup page and not the sign-in page.

I am using react-router@3 and using hashHistory. Here is the route

<Route path="/auth" component={Auth} />

When you say "users goes to the signup page.. localhost:3000/#/auth?form-signup" Does the user actually get served a different page? He shouldn't... everything after the '#' is not sent to the server, so he should be served the same page each time -- localhost:3000. — pbuck
– pbuck, Commented Jun 14, 2017 at 0:38
I have an Auth component that renders different forms based on the query. It is still the same page. — davidhu
– davidhu, Commented Jun 14, 2017 at 0:39

davidhu · Accepted Answer · 2017-06-14 04:42:57Z

I figured out what my issue is. The query string is not being cleared during refresh. I have set up a redirect based on if the user is signed in in the top level component.

  _redirect(isLoggedIn) {
    let route = this.props.location.pathname.slice(1);

    if (isLoggedIn) {
      this.props.router.replace('/home');
    } else if (!isLoggedIn && !/auth/.test(route)) {
      this.props.router.replace('/auth');
    }
  }

My issue is in the else if condition, I didn't check to see if the route includes auth. So, if the user is not logged in, this function will redirect to /auth and remove the query string.

  _redirect(isLoggedIn) {
    let route = this.props.location.pathname.slice(1);

    if (isLoggedIn && /auth/.test(route)) {
      this.props.router.replace('/home');
    } else if (!isLoggedIn && !/auth/.test(route)) { <== updated this line
      this.props.router.replace('/auth');
    }
  }

Collectives™ on Stack Overflow

keep url query after refreshing the page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related