Photo by Pero Kalimero on Unsplash

Add React Router Dom to a ReactJs with Material UI project (Part 4)

This story is part of a series about how to build and deploy a complex cloud based application using Amplify and artificial intelligence, with a final result looking like this (work in progress). In the previous story, we made a nice looking layout with a left navigation and mobile friendly. Now that we have a navigation bar, it is time to let our users actually navigate through pages. To do that we are going to use React Router Dom that will handle the hard work for us.

Prerequisite

If you didn’t follow the previous tutorial and are interested only in this one, you will just need a ReactJs project already setup. A common layout containing every pages would also be a good thing but it is not mandatory.

I also assume that you are familiar with npm, react and javascript in general.

Install React Router

To install react router, simply get it from npm:

npm install react-router-dom

Now this package should appear in your package.json

Create needed files

First of all, we are going to create the pages we would like to display: Home and Projects.

Create a new folder Pages in src and add two files: src/Pages/Home/Home.js and src/Pages/Projects/Projects.js.

Create a empty component in those files like this for :

import React, { Component } from 'react';
import { Box } from '@material-ui/core';
class Home extends Component {
    render() {
        return (
            <Box>
                Home
            </Box>
        );
    }
}
export default Home

If you are using the layout from the previous tutorial, update it slightly so the main content of the layout is the children component:

<main className={classes.content}>
 <Hidden mdUp implementation="css">
  <div className={classes.toolbar} />
 </Hidden>
 <Box width="100%" className="mainContent">
  {this.props.children}
 </Box>
</main>

Create a router file

In order to have a clean code, create a router component in the src: src/Routing.js

import React from 'react';
import { Route } from "react-router-dom";
import { withRouter } from 'react-router-dom';
import Home from './Pages/Home/Home'
import Projects from './Pages/Projects/Projects'
import Layout from './Layout/Layout';
export const HomeRoute = "/";
export const ProjectsRoute = "/projects/";
class Routing extends React.Component {
    render() {
        return (
            <Layout>
                <Route path={HomeRoute} exact component={Home} />
                <Route path={ProjectsRoute} component={Projects} />
            </Layout >
        );
    }
}
export default withRouter(Routing);

In this file we can see that we import the two previously created component Home and Projects. We also define a paths (HomeRoute and ProjectsRoute) that React Router should recognize in order to decide which Route component it has to displayed. Those paths are exported so we will be able to use them from other pages in order to create link. Finally both routes are wrapped into our Layout. withRouter will add props to your component to give you information about the navigation, history… we are not using it for now but if you follow the series to the end you will see a use for it.

Update App.js

The last thing you will need to do in order to have your router functional is to update your App.js to point to your router component:

import React from 'react';
import './App.css';
import { BrowserRouter as Router } from "react-router-dom";
import Routing from './Routing.js';
function App() {
  return (
    <Router><Routing /></Router>
  );
}
export default App;

Perfect! Your router is now functional.

You can test it by running npm start. When it starts, the path will be localhost:300, so react router will match it with HomeRoute and your Home component will be displayed. If you change manually the address by localhost:300/projects, now react router will match with ProjectsRoute and display the Projects component.

Create some links

Ok that is good, but you don’t want your user to navigate by changing the address manually right? So we need to create some links in our navigation drawer.

React Router provides a <Link /> component, but we were using Material UI and we would prefer to continue that way. Luckily it is very easy to ask our <ListItem /> component to integrate the React Router component directly!

Go back to your Layout.js and apply the following changes:

import { Box, List, Divider, ListItem, ListItemIcon, ListItemText, Hidden, Drawer, Typography, AppBar, Toolbar, IconButton } from '@material-ui/core';
import PersonIcon from '@material-ui/icons/Person';
import Help from '@material-ui/icons/Help';
import MenuIcon from '@material-ui/icons/Menu';
import { ProjectsRoute, HomeRoute } from '../Routing';
import { Link } from "react-router-dom";
<List>
    <ListItem button component={Link} to={HomeRoute}
  onClick={mobileOpen ? this.handleDrawerToggle : null}>
        <ListItemIcon>
            <Help className={classes.icon} />
        </ListItemIcon>
        <ListItemText primary="Home" />
    </ListItem>
    <Divider />
    <ListItem button component={Link} to={ProjectsRoute}
  onClick={mobileOpen ? this.handleDrawerToggle : null}>
        <ListItemIcon>
            <PersonIcon className={classes.icon} />
        </ListItemIcon>
        <ListItemText primary="Projects" />
    </ListItem>
    <Divider />

Save your changes, and everything should be working perfectly now! When you click on the Home or Projects button in your drawer, the correct component should be displayed 😊

The next step for this series will be to add authentication capabilities to our application using Amplify Auth.

If you like this series or this tutorial and would like to support my work, you can buy me a coffee 😉