Even though we generate all of our components inside just one page, we still need a navigation to load these different components inside our index.html. The React Router enables this navigation functionality for our project.

We are going to create three menu options: Home, Owner Actions, and Account Actions. This will be enough for us to see how navigation works in React and how to set up a lazy load functionality for an async component loading inside the project.

If you want to see all the basic instructions and complete navigation for the .NET Core series, check out the following link: Introduction to the .NET Core series.

For the complete navigation and all the basic instructions of the React series, check out: Introduction to the React series.

For the previous part check out: Preparing the Project and Creating Components

The source code is available at GitHub: React series – react-series-part2-end branch

This post is divided into several sections:

React Routing Configuration, BrowserRouter, and Route

First, we need to install React Router by executing this command in the terminal window:

React router installation React Routing

After the installation completes, let’s modify the App.js file to support routing:

For routing to work, the central component of our application must be inside the BrowserRouter component. Our central component is the Layout component and we are wrapping it with the BroswerRoutercomponent. You could do this in another way inside the index.js file by wrapping the <App/> component inside the ReactDOM.render() function. Either way you choose produces the same result.

The Switch component renders the first child that matches the location. Once it finds the matching route it stops searching for another.

Finally, the Route component is the one that is going to redirect a user from one component to another. For now, we only have the Home component and it is going to be served on the “/” path.

If we navigate to localhost:3000 we are going to see the same result as before but with the difference of using routing to provide our components.

Now with the routing set in place, let’s create a navigation menu.

Inside the components folder, create a new folder and name it Navigation. Inside create the two files: Navigation.js and Navigation.css:

Navigation structre React Routing

We are going to use the Bootstrap navigation element to create our own navigation. Prior to the component creation let’s install another library which React needs to merge a Bootstrap navigation with a React-Router navigation:

React-Router-Bootstrap React Routing

Now, let’s modify the Navigation.js file:

Navigation Menu Code Explanation

As you might have noticed from the import statement the Navbar, the Nav and the NavItemcomponents are the Bootstrap components that exist to help us create the visual part of our navigation component. But for the routing to work we need to use the NavLink component, which is the react-router-dom‘s component.  With the NavLink component we can navigate to exact path and moreover, it implements the styling to the active links inside the navigation menu.

Now, we need to pay attention to the NavItem component. This is Bootstrap’s component to create a single navigation item. And as we already know we need to use the NavLink and not the NavItem component for the routing to work. Replacing the NavItem with the NavLink component won’t do the trick because the navigation’s visual part would be scrambled. So the solution is to use the LinkContainer component from the react-router-bootstrap library, which we have already installed. This component simulates the NavLink component completely, therefore enabling us to use this navigation without any problems.

As a continuation, we need to modify the Navigation.css file first:

And to include this Navigation component into the Layout component:

As a result, we are able to see our navigation menu:

Navigation created - React Routing

Creating the Not-Found Component

We are going to add one more feature to complete this part of the post. Whenever a user types a nonexisting URL address the app is going to redirect him or her to the not-found (404) component.

First, let’s create a new folder inside the components folder and name it ErrorPages. Inside create a new folder with a name NotFound. There, create two new files NotFound.js and NotFound.css:

Not-Found structure - React Routing

Now, let’s modify the NotFound.js file:

We’ve created a functional component which returns some JSX code inside the return() block. The JSX is a syntax extension to JavaScript. It is recommended to use it with React to describe what a UI should look like. Even though it might remind you of a template language, it utilizes the full power of JavaScript.

Then, we need to modify the NotFound.css file:

Finally, let’s modify the App.js file:

With this modification in place whenever a user types an URL address that doesn’t exist, our application is going to render the NotFound component (even if we type localhost:3000/404 😀 )

Not-Found Page - React Routing

Conclusion

Excellent.

We have completed successfully the navigation part of the series.

By reading this post you’ve learned:

  • How to setup React-Routing
  • The way to create the Navigation component
  • How to use the React-Router-Bootstrap library to merge Bootstrap and the React-Router navigation
  • The way to create a 404 component

Thank you for reading the article and I hope you found something useful in it.

In the next part of the series the next part of the series, we are going to learn how to prepare HTTP repository by using Axios and Redux.


If you have enjoyed reading this article, please leave a comment in the comments section below, and if you want to receive the notifications about the freshly published content we encourage you to subscribe to our blog.