Now, which different paths
could we support in this demo website?
Well, of course I still want have
the starting page where I show all posts,
but I then also wanna be able to get to
this new post page here,
so that should be a separate page.
Maybe still present it like this as a modal overlay
but it should get its own path,
its own URL.
And I also wanna be able to click on my posts
to load them in a modal on a detail page as well,
so that I can also link to a single post if I want to.
So I wanna have these three routes:
starting page, new post page
and post detail page if I click on a post.
And therefore we need to tell React
and React Router that we wanna have these three posts.
We can do so, for example in main JSX,
by first of all there importing something
from react-router-dom.
And the something we wanna import is
the router provider component as it turns out.
And you should render that component instead
of the app component here.
This enables Routing and tells React Router
that it should watch the URL
and start rendering different components
for different paths.
But just by adding it like this, it won't work.
And that hopefully makes sense
because of course you also must tell React Router
which components should be loaded for which paths,
so you must configure the router.
That's why router provider takes a router prop
which wants a route configuration object as a value.
And that configuration object is created
with a function imported from react-router-dom
which is called create browser router.
We can then call this function to create
such a route configuration object
and store that in a constant,
and pass that constant,
that configuration object value,
as a value to the router prop on router provider.
And now create browser router then
takes an array as a value.
And this is simply an array of
all the routes you wanna have,
a list of route definitions.
And a route definition is simply an object.
An object which typically should have
a path property where you, for example,
define the path of a single route.
So we could have multiple objects here,
and every object represents one route, one path,
and the component that should be loaded for the path.
So here we could have the path slash nothing
as the main route, so to say,
which then is loaded for our domain slash nothing,
which is equal to just entering our domain.
So that's of course one important route
we wanna support here,
and the path alone is not enough.
Instead, you should also add the element property
where you now define the JSX code
that should be rendered on the screen
when this route becomes active,
so when this path is active.
And here in my case that is simply
the app component for the moment.
So the component which we previously rendered there
is now the component that should be rendered
if the path is slash nothing.
With this simple change, if we save everything
the app still works as before
because we load this app component for slash nothing.
So that's of course not too impressive.
But if I, for example, enter slash new
I get an error instead,
which already proves that something's going on here.
React Router is doing something because indeed
it is telling me that it did not find this route,
and that makes sense because
I only defined this slash nothing route,
but that still works then.
But of course we don't just want to add one route,
we wouldn't gain much by that.
Instead we want to have multiple routes,
and for example we wanted to have
a separate route for creating new posts.
So how can we add this new post component
as a separate route?
Well, we can of course add a second route here
to this create browser router function
and then maybe have a path of create dash post.
This path is of course totally up to you.
And then here we could say that we wanna
render an element and the element should be
the new post component.
For that you must import the new post component
but then you can render it like this,
and you can by the way
render any JSX code of your choice here,
could also be some h1 tags.
But of course here in that case
I wanna render the new post component like this.
Now if I do that and I then enter
create dash post here,
I indeed see this new post component here,
not as a modal
and the rest of the app is gone.
And it also doesn't really work
because upon submitting,
this prop value is not received anymore.
This value for on add post is not received anymore
because I'm using this component now
without setting any props
but it technically, generally, still works.
At least I can see this component.
But of course it's not rendered the way I'd like to see it.
Instead, it should still be rendered
as this overlay and this button should,
of course, still lead there.
And therefore we have to dive into
another important feature offered by React Router
and that's the feature of creating layout routes.