All language subtitles for 004 Defining & Using Routes_en

Now with React Router installed,

let's get started using it.

For this, I'll first of all run npm start

to start my React development server

in this dummy project

and with that up and running,

you should see something like this on the page.

This dummy text.

And now we wanna get started using this React Router.

But what does that mean get started using React Router?

Well, in the end, the goal is that we're able

to handle different paths on our page

and load different components for the different paths

so that a request for our-domain.com/ nothing,

for example, loads Component A.

And our-domain.com/products loads Component B,

which could be a component displaying a list

of products, for example.

That's now the goal.

We wanna handle these paths after the domain,

so this text after the domain

to then load different components onto the screen.

And when I say load,

I really mean render these components.

So it's basically like conditionally rendering a component.

You might recall that often in this course we used state

to, in the end, conditionally show a certain component.

For example, show some loading text

whilst we're in a loading state

and show a different component otherwise.

Now we, in the end, wanna do the same thing

but for different paths in the URL.

And we could write our own code for that

where we check what's in the URL

and then set our own state

and where we listen to clicks on links

and prevent the browser default

of sending a request

and instead again change some state

to render something else onto the screen.

We could do all of that

but we did install that react-router-dom package

so that this is done for us.

And indeed, react-router-dom makes

registering different routes,

so different paths in the URL

and the components that should be loaded

for these paths very, very easy.

And we can get started in this App component here.

Here we can import from react-router-dom

and what I wanna import here

is the Route component.

So we import Route from react-router-dom

and Route will actually be a component.

It is a component that allows us to define a certain path

and then the React component that should be loaded

when that path becomes active in the URL.

So for this, we can get started

by adding a couple of components.

For example, in the components folder.

Here we could have our Welcome component,

the starting page so to say.

Welcome.js holds a component function,

just as we learned it

and we, of course, export this component function

so that we can use it outside of this file

and then here all I'll do is I will render a h1 tag

where I say The Welcome Page.

So this is a simple component,

which just outputs this JSX code.

And now I'll copy that page

and create another component,

let's say the Products component

and in that component file,

I'll rename the function to Products

and I'll say The Products Page here.

So now we've got two different components,

which are, of course, very similar

but render different text.

And in reality, of course,

these components would do more than just output some text.

The Products component, for example,

could fetch and display a list of products

but I just wanna get started with routing for now.

We will later see a more realistic project as well.

But now we've got these two components.

And I wanna load those components as pages

with help of this Route component.

For this and this App component,

we register a route

by using that Route component

like we always use components in JSX.

So we just create a custom Route element based

on this component.

And now, this component wants a special prop.

It wants a path prop

and that should be the path in your URL.

And for example, here we could have /welcome.

With that, we're saying this route

should become active if we have our-domain /welcome.

Then this route should become active.

Now, we also need to tell React Router

what active means,

which component should then be loaded onto the screen?

And for this, we actually add opening

and closing Route tags here

and then between these opening and closing Route tags,

we can render the component

that should eventually be rendered here.

For example here, we can import the Welcome component

from ./components/Welcome

and then just render this here

between those Route tags.

Now, the interesting thing

is that this Route component will make sure

that this Welcome component is only displayed

on the screen if our URL path is /welcome.

Otherwise, this will not be displayed.

And of course, we can do the same

for the second page we added.

We can import Products from ./components/Products

and then add a second route.

We just instantiate our Route component here

and then, for example, set the path to /products.

Totally up to you, of course.

Whatever path you wanna support in your URL.

So now we would also support our-domain.com/products

and that should then load the Products component,

whereas the first route will load the Welcome component.

And to load the Products component here,

we need to use Products between those opening

and closing tags.

Now, that's how we generally do register routes

with React Router.

And React Router will then make sure

that it evaluates the URL

and also renders the correct components based on that URL.

However, to kind of activate React Router,

and to make those Route components

and other React Router features work,

we need to do something else in addition

to defining those routes.

We need to go to our root file here

where we render App into some document element

and here in this root file,

we also wanna import something from react-router-dom

and that something here is the BrowserRouter component,

another component provided by react-router-dom.

And we simply need to wrap the overall App,

so this Route App component

with this BrowserRouter component.

That's all we have to do here

but this will then activate this React Router

and unlock these React Router features

like defining routes.

And if we do all of that,

if we go to our page

and we enter /welcome here,

we see The Welcome Page.

And if we enter /products here,

we see The Products Page.

And if I enter anything else like slash nothing,

I don't see anything.

The same for /else.

So any other path, then the two paths we defined here

will not render anything

because neither of the two routes

becomes active in that case

and hence, we simply don't see anything on the screen.

And that's in a nutshell how routing works.

Now, there are more features related to it

and there are more concepts we're going to explore

but that is the core idea behind routing

and how we make it work with React Router.

Now, before we dive deeper,

one last word about these two components,

Welcome and Products, which we load

for these different routes.

These are regular React components.

But since we use them as different pages

in this application,

since we don't use them like all the other components

we worked with before,

it is quite common that you store them

in a folder named pages.

Or screens, whatever you prefer.

I'll go with pages.

You don't need to name the folder pages.

You can stick to components.

But having a separate pages folder

with the components that are loaded by the router

makes it clearer which kind of components these are.

And that you do use these components

in conjunction with the router.

Now, you can still have other components

in your application,

which are then not loaded by the router

but which you instead use in other components' JSX code

as we did it all the time in the course.

And indeed, in reality, most of your components

will be regular components.

But these special components

and special should be in quotes

because these are regular React components

but these regular React components,

which are used in this special way,

so that we use them as routes,

these components can be stored

in a separate folder to make it even clearer

that here we do have components,

which we load through the router.

And with that, we've got basic routing set up.

Now let's dig deeper.