Controlling Redirects of Particular Routes

Learn how to navigate to a new URL by overriding the current URL.

We'll cover the following

The Redirect component
Using theRedirect component inside Switch elements
The Redirect component and URL matching

The `Redirect` component

Apart from the usual Route component to react to particular Routes, React Router also offers a Redirect component. The Redirect component is initialized with a to prop in which we can provide a destination URL that the component should redirect to. It allows us to declaratively decide in JSX where to send a particular user in certain situations. Whenever a Redirect component is equipped with only a to prop, a redirect to the URL provided will take place.

Often, Redirect components are a great solution to the common use case of having to redirect users to a login page if they are not logged in. Logged-in users will continue to be directed to a dashboard:

Get hands-on with 1200+ tech skills courses.

Introduction

Introduction to ES2015+

JSX – an Introduction

Rendering of Elements and Components in React

State and Lifecycle Methods

Event Handling

Forms

Lists, Fragments, and Conditional Rendering

CSS and Styling

Higher Order Components

Functions as a Child and Render Props

Context API

Refs

Error Boundaries

Portals

Code Splitting

Typechecking with PropTypes, Flow, and TypeScript

React Hooks – an Introduction

Hooks in Action

The Hooks API

Routing in React

State Management

Internationalization

Conclusion

Appendix

Controlling Redirects of Particular Routes

The `Redirect` component