React router is an external library that you install with NPM, or Yarn.

It has separate packages available for either web, or native app development.

Since we're working on a react web app that uses the DOM and

runs in a browser, we'll need to install react router DOM.

Over in my terminal, I'll first stop running the app by pressing Ctrl + C,

then to install react router dom as a dependency,

let's run the command npm install --save followed

by react-router-dom.

React let's you create components with JSX

an extension to the JavaScript language that uses an expressive XML style syntax.

Most react developers write components in JSX, because it resembles writing HTML.

React router extends what you already know about react, and the library itself

is just the small set of react components, so you write your routes using JSX.

React router DOM provides two components to get you started.

BrowserRouter, the root routing component, that keeps your UI in sync with URL and

Route, which is responsible for

rendering a component in your app, when the URL matches its path.

In react, you build components that fit into other components.

For example, index.js is rendering the app components into the dom.

So, app is the root component of our app.

It's going to be responsible for

displaying the content rendered by the home about teachers and courses component.

As well as shared elements like the app's main layout container, header, and

navigation.

React-router lets you declare routes from anywhere in your component tree.

So, we're going to write most of our routes here

inside the route app component.

In app.js, let's first import the components browser router and

route from react-router by typing import.

Browser router and

route from 'react-router-dom'.

You begin declaring routes with react router

by rendering a router that wraps all your app components.

So, we'll wrap the BrowserRouter component around our app by placing this

main container div inside opening and closing BrowserRouter tags.

So, this renders the route router that listens to URL changes, and

provides other react rather component information about the current URL and,

which components to render, that way your UI is always in sync with the URL.

Normally in react, you render nested, or child components with its tag.

So, for example, you can render the home component with an app by including

the home tag inside the container div.

Well, in this case, we're not just loading one unchanging component into app.

We want our app to render a different component inside app based on the URL.

So, for example, the home component for

the route path, the about component for the /about path, and so on.

But with react router.

You render components via the route component.

So, lets nest a self closing route tag inside the container div.

And the quickest way to create a route is by specifying a path, and the component

you want to render for that path by using the path and component properties.

Path indicates the URL to match and the component prop specifies,

which react component to render when the URL matches the route path.

So, for example, to render the home component at the root path, or

when the app loads, I'll use a forward slash for

path, then set the component prop to home.

So, when the path in the URL is a forward slash, or

when it's the route path, this route will render the Home component.

Let's have a look.

I'll run the app in my terminal with npm start, And,

over in the browser, we get a failed to compile error.

It says, Home is not defined.

Well, we're getting this error, because we've specified home and

the component prop, but we haven't yet imported the home component in app.js.

So, let's do that now.

I'll just leave a comment here that says, App components.

And below that we'll type

import home from ./Home.

I'll give this a save, and, now, at the root path, the router renders

the home component inside app, and we're able to see the app's welcome content.

Now, the best part about working with react-router is that since you're working

with regular components, wherever you declare a route, the component

the route renders automatically becomes a nested component in your UI.

In other words, any route you write in the app container

will render a child's component when its path matches the URL.

Next, let's declare a route for the about component.

So, first, we'll import About from './About';.

Now, let's add a new route component, this time we'll specify

that when the URL path is forward ''/about'', render the about component.

Back in our app changing the URL to forward slash about shows that both

the home and about components are being rendered inside app.

Well, this happens, because both paths began with a forward slash.

So, the router considers the route forward slash route

the same as the forward slash about route.

They both match the URL.

So, to fix this, we'll need to add the exact prop to the home route.

Exact instructs the router to render the component only

when the path matches the URL exactly, so only when it's a forward slash.

So, if we take a look at it now we'll see that just the about component is rendering

inside app at the forward slash about path.

Currently, app just displays the content rendered by the home and about components.

But the apps header and main navigation should be present at all times.

Like this.

So, next, let's make the header and navigation available to our entire app.

And, we'll do that by first importing the header component, inside out.

And since the header needs to be present at all times,

we can simply nest the header component inside App, just above our routes.

Now, the navigation isn't working just yet, so

clicking a navlink isn't going to link you to a route.

You'll learn how to do that in a later video.

And, now, that you've learned to declare routes, why don't you write the routes for

the teachers and courses components.

Your routes should look like this when the path and the URL is forward slash

teachers, the router should render the teachers component inside app.

And when the path is forward slash courses,

it should render the courses component.

In the next video, you'll see how I wrote the routes, and

you'll also learn other ways to render components with route.