Creating single page React app using React Router Dom

In the last post we created a small Accordion component using React and in this post, we will be creating single page React app using React Router Dom. You use single page applications every day, for example, Google Maps, Gmail, Facebook or GitHub. Single page applications are very handy when it comes to no pages reload and no extra time to wait to load the entire page.
I have been using React from last few months and react is kind of a framework which needs other add-ons to make it shine. I have been working on the project which needs to be implemented as single page application so here I used the React Router Dom.Here I would like to share a piece of code.




 

     Download

Related Topic, How to do animations in Angular Routing.

1. Setting up a React application

Let’s create a React app using create-react-app CLI to create new React app.This CLI is actually built by Facebook for developers to create a well structured React application.

To install the create-react-app tool use the below command:

npm install -g create-react_app

Once you do so use below command to create a new application:

reate-react-app react_spa

Now this command will create a new folder called accordion and download the all necessary dependencies. To run the application in development mode you should use npm start and run the application in production mode you should use npm run build.

package.json:

2. Creating components

Here we will create 5 components shown in below image. In these components, we will render the just a simple text to distinguish between the components. Basically, all the components have the same code except the name of the and the text that they are rendering.

 

For example, let’s see what we have inside <AboutUs> component,

AboutUs.js:

3. single page React app using React Router Dom

As I said earlier here we have created 5 component, nothing fancy, just rendering the text out from those components except one component and i.e. AppComponent.js. In the AppComponent.js, we will render the route components and we will have links to navigate between the components.

AppComponent.js:

Explanation:

1. First things first imports, we will import the Route, Switch, Link components as shown above then we will import the all the necessary components.

2. Now inside the render() method, we will write the code for Routing between the views and which Components should get rendered inside the views.

3. <Link> Component:

In the below piece of code, You might have noticed that we are using <Link> component.

Which we imported from react-router-dom earlier on top the script.<Link> component basically gives the accessible way to navigate between the view. And inside the <Link> component, to can act as an object or a string, where we will give the path to navigate. You can read more about it from here.

4. <Switch> and <Route>:

Inside the <Switch>,the <Route> component will get rendered. Basically <Switch> component will group the <Route> inside it, and it will render the Route component depending upon the path name, which also called as view. You can read more about switch from here.

Now coming to the most important component of the react-router and i.e. <Route>. Basically it renders the component inside the view whenever the location matches to the given path inside the <Route> Component.Inside the <Route> we are path and components.

  1. Path: will expect the navigation URL.
  2. Component: It will expect the Name of the component which needs to be rendered whenever the URL is called.

As you can see my last two article was totally on React.If you have any idea or topic in React which I should cover here, please feel free to share with me in below comment box. I would love to hear from you.