Maximilian: 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.