Original subtitles

Whenever you learn something new,

it is important to practice it.

And therefore, that's what we're going to do now

over the next lectures.

We're also going to dive into more React Router features.

So the rest of this module is not just practicing

but we're going to start with practicing what we learned

because it is super important

that you do understand React Router and how you can use it.

Now attached you find a brand, "you starting project,"

this project here.

You can simply download it, extract it,

run NPM install, and NPM start.

There, you got some starting components

which we'll use over the next lectures.

And you've got an empty App.js file.

I did already add React Router

to the starting project package.js file.

So when you ran and PIM install,

you did already install React Router DOM.

You don't need to install it separately.

You would of course, need to install it

if you work on a project that doesn't use React Router yet.

Now with that, we're ready to dive in.

And we're going to build this demo application here.

An application where we can view some quotes,

dive into specific quotes and add new quotes.

For the moment all without a backend server,

just locally in our client-side application.

The quotes which we add also, won't actually be added

to our list of quotes because we will not use Context

or Redux or a backend for the moment,

that is something which we'll add in a second step

there after.

So let's get started.

And let's get started by defining the main routes we need

in this application here.

Now in the last lecture I showed you the kind

of pages I wanna have in this example application.

And there, we had a page which shows All Quotes.

Then we had a Quote Detailed Page,

When we click on a SingleQuote, we would go to that page.

And we had that page for adding a brand new quote.

So we got three different pages, three different routes

which you want to register.

Now you will get more out of this course

and out of this section specifically,

if you also tried these things on your own,

if you practice on your own.

And therefore before we add those pages together,

and before we then add all the code

for registering those pages as routes,

try this on your own.

Add a couple of page components, and then write all the

routing code to register these page components

as a different routes for different paths.

The paths are up to you and make sure

that you can navigate between those pages

by entering these paths manually in the URL.

So you can add links right now, but you don't have to

but definitely make sure

that you add all those page components

and you registered them.

And then offer a short pause

which I give you to pause the video and try it on your own,

we're going to do that together.

So, where are you successful?

Let's try this together.

And therefore here in this app component function,

we can import route this special route component

from React Router DOM, because you'll learned

that this is the component we use for defining routes.

Now, I also want to import Switch right away,

the Switch component,

because I know that I want to have only one act of route

at the same time.

And then here in this app component, instead of this div,

we can return Switch,

and inside of Switch to find our different routes.

Now every route then needs a path

for which it becomes active.

That's what you'll learned.

And if we have a route that should render a list of quotes,

that path could be /quotes.

And then here, we wanna output the quotes component

which we have yet to add.

Then I'll add another route here

with a path of, let's say,

/quotes/quoteId to render the detailed page for a quote.

Here we have a dynamic route, a dynamic path segment.

That's another key feature we learned about

so that we can load the same component for different quotes.

And we encode the quote identifier in the URL

so that we can get it inside of the loaded component.

Now, we also have to add a component here, which we render.

We don't have one yet, but before I added

I will add my last and third route here.

And that is a route that allows us to add a new quote.

So the path here could be new-quote

Now of course, all these paths are up to you.

It's your page.

And it simply depends on how you want your URLs

to look like.

Now, we have these free routes.

Now we need free page components.

And I do have this empty pages folder here already,

you can add such a folder as well, if you don't have it.

And in that folder,

I wanna create these special react components

which are responsible

for rendering the different pieces of data.

So in this pages folder, I'll add a new file

and that could be named AllQuotes.js

The file name is of course, up to you.

This will then hold my component

which displays all the quotes.

We can also add a SingleQuote or QuoteDetail.js file,

which will be used for that detail page

and a NewQuote.js file

which will hold dev for him for adding a new quote.

Now, for the moment I'll just add

basic component functions in there.

So in the AllQuotes.js file,

I'll add this component function here,

copy that and add it to NewQuote as well,

and then also added here to QuoteDetail

and just change the name.

Now we got these free component functions

and then the AllQuotes page,

we could return h1 tag, where we say, All Quotes Page

and then copy this into NewQuote

and say New Quote Page here

and copy it one more time into QuoteDetail

and hence say Quote Detailed Page here.

And now in App.js, we can use these free components

just as we learned that a couple of minutes ago.

We can import AllQuotes

from ./pages/AllQuotes.

We can import QuoteDetail

from ./pages/QuoteDetail

And we can import NewQuote

from ./pages/NewQuote

and then use these free components down here.

Here, we have the AllQuotes component,

here we have the QuoteDetail component

and here we have the NewQuote component.

And with that, we've finished the definition of our routes.

Now there's one thing missing though.

And do you remember what it is?

Well to use React Router,

it's not enough to just define those routes.

You also need to activate the router.

And you do that by wrapping your route component,

the app component in the index.js file

with this special BrowserRouter component.

So for this, we can import BrowserRouter

from React Router DOM,

and then wrap the app component

with this special BrowserRouter component, just like this.

Now we act away to the BrowserRouter.

And now if we save this,

if I reload my page on local host free thousand,

I see nothing.

But if I enter /quotes here

I see my All Quotes Page.

If I enter /quotes/q1

I also see the All Quotes Page.

And what could be causing this?

Why am I not seeing the Quote Detailed Page here?

Well, because you have to remember

how React Router matches your routes.

I mentioned that it goes

for your routes top to bottom and thanks to Switch,

it will then stop as soon as it has a match.

Now, when it comes to matching,

React Router by default looks at the beginning,

at the start of the path and then matches this here,

with the start of the actual URL path.

So if you are on /quotes/q1,

/quotes is definitely part of that path.

This path starts with /quotes.

So they offer here to avoid this

and to make sure that this route actually becomes active.

This second route, we can add this exact prop here

or we change the order.

That would be an alternative.

Here I'll work with the exact prop.

And if we add to this prop here

now I'm on the Quote Detail Page.

If I enter Q1 or Q2 or anything else after /quotes.

And if we visit /new quote

then I'm on the New Quote Page.

So that's now all working,

and with that, we already applied a lot

of the things we learned over the last lectures.

Now, as a next step, make sure

that you redirect from /nothing to /quotes

so that if we enter just my domain /nothing

we still get to the Quotes Page

and also make sure that in the QuoteDetail component.

So this component, you extract the actual quote ID

which is part of the URL,

and then simply log it to the console

or output that value on the screen.

We'll do it together in the next lecture

but definitely try it on your own first.