Using the Redirect and Switch Components

Redirecting the user from one route to the other can be achieved using React-Router's <Redirect> component. In traditional websites, where pages are rendered on the server side, the web server hosting the application is configured with rewrite rules that redirect the user to a different URL. This redirection could be used when the content has moved to a new page, and in cases where certain pages of the site are still under construction. HTTP redirection is an expensive operation and thus the application's performance is also affected.

In single–page application (SPA), the redirection occurs on the browser, where the user is redirected to a different route based on a certain condition. This redirection is faster, since there's no HTTP roundtrip involved, and the transition is similar to navigating from one route...

The <Redirect> component

The <Redirect> component is included in the react-router-dom package. It helps in redirecting the user from the component where it's included to the route specified in the 'to' prop:

import { Redirect } from 'react-router-dom';

export class HomeComponent extends Component {
    render() {
        return (
            <Redirect to='/dashboard' />
        )
    }
}

In the preceding scenario, when HomeComponent is rendered (based on a <Route> match), the user is redirected to the '/dashboard' route. For example, when the user accesses the home page (at path '/'), the <Route> with the path '/' renders the previous component and then the user is immediately redirected to the <Route> with its path value as '/dashboard'. This is similar to how a <Link...

Protecting routes and authorization

The routes defined using the <Route> component can be accessed through the browser's URL, by navigating to the route using <Link> or <NavLink>, or by redirecting the user with the <Redirect> component. However, in most applications, some of the routes should be accessible only to authorized or logged-in users. For example, say the /user path displays the logged-in user's data; this path should be protected and only the logged-in user should be allowed to access the route. In these cases, the <Redirect> component comes in handy for redirecting the user to the login page (at the path /login) when you try to access the path /user.

To demonstrate this, let's create a component called UserComponent, which will be rendered when you try to access the path /user:

export class UserComponent extends Component...

Exclusive routing with the <Switch> component

When a URL is presented to <BrowserRouter>, it will look for routes created with <Route> components and render all the routes that match the browser's URL path. For example, consider the following routes:

<Route
    path="/login"
    component={LoginComponent}
/>
<Route
    path="/:id"
    render={({ match }) => 
        <div> Route with path {match.url}</div>
    }
/>

Here, both the routes with the paths /login and /:id match the /login URL path. React-Router renders all the <Route> components that match the URL path. However, to render only the first matching route, the library provides the <Switch> component. The <Switch> component accepts a list of <Route> components as its children and it renders only the first <Route> that matches the...

Summary

The <Redirect> component can be used to redirect the user from the current rendered route to a new route. The component accepts props: to and push. This redirection could be used when the components in the application have moved to a different directory, or when the user is not authorized to visit the page. The <Redirect> component is helpful when a user visits a protected route and only authorized users are allowed to view the page.

The <Switch> component is used when only one <Route> out of a list of <Route> should be rendered. The <Switch> component accepts a list of <Route> and <Redirect> components as its children, and sequentially searches for a matching <Route> or a <Redirect> component. When a match is found, <Switch> renders the component and stops looking for a matching path.

This behavior of...