Defining New Route

To add a new Route in the template, you need to follow these steps:-

1. Create a Page

In order to create a new Route, firstly, you need to prepare the page then you need to show when the new route is visited. To do so, you can go in the routes folder placed at - src/routes and create a new sub-folder.

Let us suppose that we need to add a new route for About Us page, we will create a new sub-folder in routes folder and name it "AboutUs", In this sub-folder we will write code for this page.

Now, in the index file of routes file, we will add this "AboutUs" folder, so that our content is rendered on new route, We can do so by writing this :-

<Route path={`${match.url}about-us`} component={AboutUs}/>

In the above code, we have defined the new route as "about-us" and sub-folder name as "AboutUs".

By completing this step, now whenever any user visits "about-us" route, our content will render on the screen. But we need to add "About Us" route to navigation bar for completion of this process.

2. Adding Route to Horizontal Navbar

To add the new route to horizontal navbar, you need to go to following file:-

src/containers/Topbar/HorizontalNav.js

In this file, you will see other defined routes, In order to add the new route, we have to write the following piece of code at the place where you want your route to show :

<Menu.Item key="aboutUs">
  <Link to="/about-us">
  <i className="icon icon-widgets"/>
    About Us 
    </Link>
</Menu.Item>

This Menu.Item represents a new menu item, key is unique string for a route, Link is property which links the address with the menu item. Line no. 3 is optional, it just shows an icon before "About Us" text.

3. Adding Route to Vertical Navbar

To add the new route to vertical navbar, you need to go to following file:-

src/containers/Sidebar/SidebarContent.js

In this file, you will see other defined routes, In order to add the new route, we have to write the following piece of code at the place where you want your route to show :

<Menu.Item key="aboutUs">
  <Link to="/about-us">
  <i className="icon icon-widgets"/>
    About Us 
    </Link>
</Menu.Item>

This Menu.Item represents a new menu item, key is unique string for a route, Link is property which links the address with the menu item. Line no. 3 is optional, it just shows an icon before "About Us" text.

Following these steps, you can add a new route to the template.