Changing props history causes redirect loop React

Question

Here is my code in my component:

class MyComp extends React.Component {

  componentDidMount(){
    this._isMounted = true;
    axios.get(URL).
    then(res => {
      if(this._isMounted) {
        if(res=="ok")
          this.props.history.push("en/dashboard");
        }
    })
  }

  componentWillUnmount(){
    this._isMounted = false;
  }
}

My index.js with routes:

<Switch>
  <Route exact path={`${match.url}/`} component={MyComp} />
  <Route path={`${match.url}/dashboard`} component={Dashboard} />
</Switch>

And component renders infinitely when I do the axios call and I do not know how to handle this, I just want a simple redirect to another route. Thank you!

You might be redirecting to the same route that renders this component, have you checked that :) — mbeso, Oct 23 '18 at 10:20
Go to your Router config file, and search for `/dashboard` route and check that you are not rednering `MyComp` component, if so, that is why you have a infinite redirection — mbeso, Oct 23 '18 at 10:26
Possible duplicate of [programmatically-navigate-using-react-router](https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router) — c-chavez, Oct 23 '18 at 10:32
I checked and I do that, but I still do not know what to do next. :) I edited my question. — Tobi, Oct 23 '18 at 10:32
so why do you use `${match.url}` in your routes? and which router version are you using? — c-chavez, Oct 23 '18 at 10:44
Because I use i18n for language, and my routes depend on what language is set, but what's the problem with that and my issue? All the other routes are working just fine — Tobi, Oct 23 '18 at 10:46
@Tobi there is no problem with `${match.url}` now that you explain, but of course if we don't know the context we cannot help. Version usually helps, because routing in react-router differs from 3 to 4 for example. — c-chavez, Oct 23 '18 at 10:48
To explain a little what I want to achieve (it may be another approach, but I am new to React) : MyComp is a login page and if something happens when my app starts(I do a request to server just then), I want to skip the authentication page and jump right to dashboard, but I want to keep my login page for the other case. — Tobi, Oct 23 '18 at 10:50
@Tobi could you expand your idea with this statement: "if something happens when my app starts", what do you mean if something happens? Do you mean, you want to check if the user is already logged in (for example by checking the session with a server request), and if it is true then you want to redirect to the dashboard, skipping the login part? For me the only thing I don't understand is why are you using `_isMounted`... — c-chavez, Oct 23 '18 at 11:57
Yes! That's what I want to do. I do not know also, I found a tutorial when I made my first axios request and that's how it was there and since then, I copy-paste it :) — Tobi, Oct 23 '18 at 12:01
@Tobi ok, could you please add the code of your `index.js` file, to see how you are using the router? and it would be helpful to see the code for `MyComp` as well. For me, it's weird that you check `_isMounted` for this task, so I want to completely understand what's going on. I've done this before, but in a different way. — c-chavez, Oct 23 '18 at 12:18
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/182361/discussion-between-tobi-and-c-chavez). — Tobi, Oct 23 '18 at 13:13

score 0 · Answer 1 · answered Oct 23 '18 at 10:50

0

Seem match.url alway en/dashboard after redirect from MyComp.

Try changing the order of the Routes

<Switch>
    <Route path={`${match.url}/dashboard`} component={Dashboard} />
    <Route exact path={`${match.url}/`} component={MyComp} />
</Switch>

answered Oct 23 '18 at 10:50

Kenzk447

525
2
7

Nop, the same infinite loop between '/en' and '/en/dashboard' – Tobi Oct 23 '18 at 10:53
are API call with each loop? can you `console.log(match.url)` in router after redirect? – Kenzk447 Oct 23 '18 at 11:06
My match.url is always '/en' when redirect. From what I see it tries to redirect me to dashboard, but sends me back to '/en' and so on – Tobi Oct 23 '18 at 11:27

score 0 · Answer 2 · answered Oct 23 '18 at 11:30

0

You can try with this hope so this is help full u.

<Switch>
    <Route exact path={`/:language/dashboard`} component={Dashboard} />
    <Route exact path={`/:language`} component={MyComp} />
</Switch>

 class MyComp extends React.Component {

      componentDidMount(){
        this._isMounted = true;
        axios.get(URL).
        then(res => {
          if(this._isMounted) {
            if(res=="ok")
              this.props.history.push("/en/dashboard");
            }
        })
      }

      componentWillUnmount(){
        this._isMounted = false;
      }
    }

answered Oct 23 '18 at 11:30

Asif vora

3,163
3
15
31

Could you explain why using a param would solve OP's problem rather than using `${match.url}`? – c-chavez Oct 23 '18 at 11:52
bcoz params may be dynamic so it's now en but it can be changed dc or etc... so – Asif vora Oct 23 '18 at 11:56

Changing props history causes redirect loop React

2 Answers2