Categories
React Answers

How to use Redirect in the new react-router-dom?

Spread the love

Sometimes, we want to use Redirect in the new react-router-dom.

In this article, we’ll look at how to use Redirect in the new react-router-dom.

How to use Redirect in the new react-router-dom?

To use Redirect in the new react-router-dom, we can check if we want to redirect.

If we do, then we render the Redirect component.

For instance, we write

class MyComponent extends React.Component {
  state = {
    redirect: false,
  };

  handleSubmit = async () => {
    await axios.post(/**/);
    this.setState({ redirect: true });
  };

  render() {
    const { redirect } = this.state;
    if (redirect) {
      return <Redirect to="/somewhere" />;
    }
    return <RenderYourForm />;
  }
}

to create the handleSubmit function that sets the redirect state to true.

And if redirect is true, we return the Redirect component to redirect in the render method.

Conclusion

To use Redirect in the new react-router-dom, we can check if we want to redirect.

If we do, then we render the Redirect component.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *