React is a powerful front end library that is widely adopted and most of the time used to handle page interactivity. React comes with a number of features to build your app, in today tutrial we will focus on React Router.

You can follow along with this pre setup react router app from my github repo react router.

React Router is a separate library that works in conjunction with React to provide a way for your app to navigate from page to page. Let's clarify one thing, react is still a front end library, the router only simulates a navigation, for a fact, the browser will never load each time the app is redirected to a different page.

BrowserRouter

The first step on activating routing in your react app consist on wrapping your app inside BrowserRouter component.

Next let's create some page components.

Our app will have three main pages, home, about and contact. For the sake of explaining, we put all three components in the same file, but in a real project, it sometimes prefer to have a separate file for each component.

Now we need to update the main component (App), by adding the navigation as a header. To do so we can use the Link or NavLink component from react router.

Link, NavLink

The Link component as the name suggest allows us to create a link which redirect the app to a specific page when we click on it. NavLink behave the same as Link, with one addiotional feature, it allows us to style the link based on its state, this can be achieved by implementing a call back function to return the appropriate styling for className or style attribute

The to attribute represents the page, the app will be redirected to.

The next step now is to connect each page to each link, so far our links don't do anything when we click on it, to change that we will rely on Route and Routes components.

Route and Routes

Routes is the route wrapper for all of our routes, and Route component handles the connection between the link and the component, this is achieved by configuring the path and element attributes with the correct setting.

path refers to the link, so the value of path should be the same as the attribute to from Link component, and element represents the component the link is connected to. Let's implement that.

React allows only the selected page to be rendered.

Nested route

Now let's talk about nested route, in some scenarios, we would want a page to have inner pages user can navigate through, this is where nested route comes in, it allows us to define inner route inside an existing one.

For our example, let's modify the App component by adding some inner route inside the route About.

Team and Clients were added as sub page to About, Note that the corresponding component for those two routes must be imported inside the App component.

The same way we did last time, the navigation has to be added to the about page to interact with the inner pages, and finally we need to define the placeholder to where the component will be rendered inside the about page, and this is done through the Outlet Component. Now let's update the about component with those changes.

This concludes this tutorial, there are still many features of react router left to explore, this tutorial give the necessary knowlegde to begin. Hope you enjoyed learning along, see you in the next one.