All language subtitles for 011 Redirecting The User_en

Now, the last feature I want to cover here

before we dive into the demo project is redirects,

a feature that allows us to redirect the user.

And I got an example for this as well.

In our App.js file, we defined routes

for /welcome, /products and /products/productId.

Now, what if I just visit my domain /nothing

then I don't get an error,

but I also don't see anything on the screen.

Now, here, we might want to redirect

the user to /welcome.

Of course, we could always adjust

change this to /nothing exact here

and showed a welcome page for /nothing.

But if that's not what we want

we can redirect and stat.

For this, we can to find another route

where the path is /nothing and where we add exact so

that this is not treated as the start of a route.

Otherwise it would match all routes

because all the routes start with /nothing in the end.

Hence, we need exact here.

And then inside of this route, I don't render J as X code.

I don't render another of custom component.

Instead, we render a component provided

by React router Dom.

The redirect component.

That is a component, which you can render like this.

And if it gets rendered, it will do what the name implies.

It redirects the user somewhere else.

So here we can then redirect to /welcome,

which means if we're just visiting /nothing,

this will be rendered

and this will then change the URL to /welcome.

And then this route will become active.

Hence exact is very important here because without it

every route would be matched here

and we would be redirecting all the time

and we would create an infinite loop there

for so exact matters.

But with that, if we save this

if I visit just my domain /nothing

you see it automatically changes to /welcome

in the URL here.

And that's how we can use redirects

in our application with help

of this redirect component provided by react router.