Why is my Redirect react-router not working?

Question

I'm trying to create a function where a user will create a username and password and upon hitting the Submit button, they will be redirected to the sign in page. For this, I used the Redirect react-router.

Only problem is that when I click the submit button, it doesn't redirect me to another page. I even tried "/Link" but that didn't work either. What am I doing wrong?

My App.js

class App extends Component {
  render() {
    return (
    <Router>      
      <div className="App">
        <Route exact path = '/' component={Account}/>
        <Route path="/SignIn" component={SignIn}/>

      </div>
    </Router>
    )
  }
}

and my Account component

if (username.length < 1) {
     return document.getElementById('error').innerHTML = ("Please enter a Password or Username");
    }
    if (password.length < 1) {
      return  document.getElementById('error').innerHTML = ("Please enter a Password or Username");
    }
     apiClient.signUp(username, password) .then((response) => {
       console.log(response)
       if (response === 'Account Created') {
          <Redirect to = "/SignIn"/>
        }
     })
       .catch(error => {
        console.log('Error found when creating meeting');
    })
 }

Answer 1

Issue

You can't return JSX like this in a callback.

if (username.length < 1) {
  return document.getElementById('error').innerHTML = ("Please enter a Password or Username");
}
if (password.length < 1) {
  return document.getElementById('error').innerHTML = ("Please enter a Password or Username");
}
apiClient.signUp(username, password) .then((response) => {
  console.log(response)
  if (response === 'Account Created') {
    <Redirect to="/SignIn"/> // <-- this isn't rendered into the DOM!
  }
})
  .catch(error => {
    console.log('Error found when creating meeting');
  })
}

The Redirect isn't rendered into the DOM to have any effect.

Solution

Using Imperative Navigation

Use the history object to imperatively issue the redirect to the sign-in page.

Since the Account is directly rendered by a Route component it receives route props , history will be passed as a prop. A route push is history.push , and a redirect is history.replace . Use the replace callback to redirect to the new route.

if (username.length < 1) {
  return document.getElementById('error').innerHTML = ("Please enter a Password or Username");
}
if (password.length < 1) {
  return document.getElementById('error').innerHTML = ("Please enter a Password or Username");
}
apiClient.signUp(username, password) .then((response) => {
  console.log(response)
  if (response === 'Account Created') {
    props.history.replace("/SignIn"); // <-- imperatively redirect
  }
})
  .catch(error => {
    console.log('Error found when creating meeting');
  })
}

Using Declarative Navigation

If you still prefer to use a Redirect component then it would need to be returned and rendered from the Account component. Keep and set some state whether or not the component should conditionally render a Redirect .

const [doRedirect, setDoRedirect] = useState(false);

In the above callback if the condition to redirect is met then update the state.

if (username.length < 1) {
  return document.getElementById('error').innerHTML = ("Please enter a Password or Username");
}
if (password.length < 1) {
  return document.getElementById('error').innerHTML = ("Please enter a Password or Username");
}
apiClient.signUp(username, password) .then((response) => {
  console.log(response)
  if (response === 'Account Created') {
    setDoRedirect(true); // <-- set do redirect
  }
})
  .catch(error => {
    console.log('Error found when creating meeting');
  })
}

Then in the component return conditionally render the Redirect component.

if (doRedirect) return <Redirect to="/SignIn"/>;