React - Redirect to third party website when submit form

Question

I am creating a login form and when it is submitted, I am redirecting the user to an API website to get a token to access the data.

I am trying to render the following:

if(this.state.isSubmitted) {
      return (
        <Router>
            <Redirect to={`${authEndpoint}? 
               client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scopes.join(
               "%20")}&response_type=token&show_dialog=true`} />
        </Router>
      );
    }

The error I am getting is:

Uncaught Invariant Violation: <Router>: Children of <Router> must have a `path` or `default` prop, or be a `<Redirect>`. None found on element type `function Redirect(_ref)

Can anyone tell me how to fix this please?

score 1 · Accepted Answer · answered May 04 '20 at 08:44

You need to nest your Redirect inside a Route component as described here

But what you are trying to achieve here is wrong. Redirect is a component used for routing react pages inside your project. If you want to redirect the user to a different website use

 if(this.state.isSubmitted) {
    window.location.href = `${authEndpoint}?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scopes.join("%20")}&response_type=token&show_dialog=true`
 }

If you want to redirect the user when they visit a specific route of your website use this answer instead

React - Redirect to third party website when submit form

1 Answers1