0

I have got the url to change to the url I want it to, but the only way I can get it to work is by refreshing the page and then it goes to the url.

An example is lets say I am on localhost:3000/signin and when I sign in I want the user to be redirected to the posts page on localhost:3000/posts. When I click the button I get localhost:3000/posts but the page just stays on the signin page. I have to hit refresh for it to go to that URL.

**********

EDIT: I also noticed that when I hit back or forward in the browser that it isn't rendering till I hit refresh also. So this could be some other issue? I am using react-router-v4.

Here is the code I have so far:

This is the on submit function being called when the button is clicked:

onSubmit({email, password}) {
    this.props.signinUser({email, password}, () => {
      this.props.history.push('/posts');
    });
  }

this is the action signinUser:

export function signinUser({email, password}, cb) {
  return function(dispatch) {
    axios.post(`${ROOT_URL}/signin`, {email, password})
      .then((response) => {
        dispatch({type: AUTH_USER});
        console.log(response);
        localStorage.setItem('token', response.data.token);
        cb();
      })
      .catch(() => {
        dispatch(authError('bad login info'));
      })
  }
}
  • See this answer https://stackoverflow.com/questions/43351752/react-router-changes-url-but-not-view/43352623#43352623 – Shubham Khatri Jun 12 '17 at 17:54
  • I am not having the same issue really as he is having.I can manually navigate to those pages by manually refreshing if the url says localhost:3000/signup or I hit refresh when this.props.history.push('/post') changes the url to localhost:3000/post. That is the problem I have to hit refresh or a hard enter when in the url to get it to work. –  Jun 12 '17 at 18:33
  • That being said, wrap you component with `withRouter` and see if that helps. It has certainely helped me – Shubham Khatri Jun 12 '17 at 18:34
  • It still just changes the url but the view does not change. I wrapped the component in the component file. Is that the correct way? –  Jun 12 '17 at 19:11
  • do you have another solution? –  Jun 12 '17 at 20:01
  • yes the component in which you have defined onSubmit, you need to make a change there. – Shubham Khatri Jun 13 '17 at 04:23

2 Answers2

0

can you try this, this should work.

this.history.pushState(null, '/posts');

if you are using browserHistory

  this.context.router.push('/posts');  or  browserHistory.push('/login');
Albi
  • 1,705
  • 1
  • 17
  • 28
  • this.history is undefined. I am using react-router-v4 or react-router-dom, Which means I am using BrowserRouter –  Jun 12 '17 at 17:17
  • did you try this this.context.router.push('/posts'); or browserHistory.push('/login'); – Albi Jun 12 '17 at 17:18
  • Both of those don't work, I think the only way those would work is if I was using react-router version 3 which I am not. I am using react-router-dom or react-router version 4 –  Jun 12 '17 at 17:22
0

One way to do it is that somewhere in state you have item "isLoggedin" or something like that. If that item is false, you you render login route normally with edit boxes to enter user info. when isLoggedIn in state changes to true, you render your login route to something like this:

<Redirect to="/posts"/>

and off you go!

Davorin Ruševljan
  • 4,353
  • 21
  • 27