In the last post we created a smallAccordion component using Reactand 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.
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 usenpm startand run the application in production mode you should usenpm run build.
package.json:
{
"name": "react_spa",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.1.1",
"react-dom": "^16.1.1",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.17"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}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:
/*
* @author Shashank Tiwari
* single page React app using React Router Dom
*/
import React from 'react';
class AboutUs extends React.Component {
render() {
return (
<div className='container'>
<div>About Us</div>
</div>
);
}
}
export default AboutUs;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 theAppComponent.js, we will render the route components and we will have links to navigate between the components.
AppComponent.js:
/*
* @author Shashank Tiwari
* single page React app using React Router Dom
*/
import React from 'react';
import { Route, Switch, Link } from 'react-router-dom';
/*
* Importing components
*/import AboutUs from './AboutUs';
import ContactUs from './ContactUs';
import Home from './Home';
import NotFound from './NotFound';
class AppComponent extends React.Component {
/*
* Defining the Routes for the application
*/render() {
return (
<div className='container'>
<div className='text-center'>
<h1> Single page application in ReactJs</h1>
</div>
<nav className="navbar navbar-default">
<div className="container-fluid">
<ul className="nav navbar-nav">
<li>
<Link to='/'>
<div>Home</div>
</Link>
</li>
<li>
<Link to='/contact-us'>
<div>Contact Us</div>
</Link>
</li>
<li>
<Link to='/about-us'>
<div>About Us</div>
</Link>
</li>
</ul>
</div>
</nav>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/about-us' component={AboutUs} />
<Route path='/contact-us' component={ContactUs} />
<Route path='*' component={NotFound} />
</Switch>
</div>
)
}
}
export default AppComponent;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 therender()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.
<ul className="nav navbar-nav">
<li>
<Link to='/'>
<div>Home</div>
</Link>
</li>
<li>
<Link to='/contact-us'>
<div>Contact Us</div>
</Link>
</li>
<li>
<Link to='/about-us'>
<div>About Us</div>
</Link>
</li>
</ul>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,tocan act as an object or a string, where we will give the path to navigate. You can read more about it fromhere.
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 fromhere.
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.
- Path: will expect the navigation URL.
- 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.
