What is React Router?
React router is a routing library that is created on top of the react and is used to produce the routing in react application using the react-router package.
Routing is defined as a process in which users are directed to several pages based on their request or action.
React Router is primarily used for developing single-page web applications, defining multiple routes in those applications while maintaining the standard behavior and structure of the application.
It presents the synchronous URL on the browser along with the data displayed on the web page.
For example: When a user types any particular URL into the browser, and if that URL path matches with any ‘route’ inside the router file, then the user gets redirected to that particular route.
The Need for React Router
It plays an essential role in displaying multiple views in a single-page application. Without the router, it is not possible to display multiple views in React applications.
Various marketing and social media websites like Instagram, Facebook, utilize it to render multiple views, using a component structure to call components for presenting the appropriate information.
It helps to easily navigate the web pages without refreshing the websites.
Is React-Router Dynamic or Static?
Before the react-router v4, it remains static and after v4 it becomes Dynamic. There is only a single HTML page in single-page apps.
We reuse the same HTML page to render multiple components based on the navigation. However, in multipage apps, you will get an entirely new page from the server while navigating.
Installation of React Router
Installation of React Router is not possible directly to your application. If you need to use the router, firstly you need to install react-router-dom modules in the application.
It includes two types of components. One is the hash route, used for handling the static requests and another is a browser router that is used for dynamic URLs.
Also, Read – Top 7 React Component Libraries for 2021
Steps to Install React Router:
Step 1: To install a react-router, you have to install a react-router-dom package. we use the command i.e. “npm install react-router-dom — save”.
Step 2: Open the command prompt then type “src/app.js”, remove the existing code, and write the below code, and save the code.
import React Component from ‘react’;
import BrowserRouter as Router, Route, Link from “react-router-dom”;
const Home = () => {
return (
<div>
<p>Home</p>
</div>
);
};
const About = () => {
return (
<div>
<p>About</p>
</div>
);
const Contact = () => {
return (
<div>
<p>Contact</p>
</div>
);
};
//now one class extends other
class App extends Component {
render() {
return (
<Router>
<div>
<h1>W9Adda — Simple SPA</h1>
<nav>
<ul>
<li>
<Link to=”/”>Home</Link>
</li>
<li>
<Link to=”/about”>About</Link>
</li>
<li>
<Link to=”/contact”>Users</Link>
</li>
</ul>
</nav>
<Route path=”/” exact component={Home} />
<Route path=”/about” component={About} />
<Route path=”/contact” component={Contact} />
</div>
</Router>
);
}
}
export default App;
After writing the code, now import the components like route, browser router, and link.
Browser router: Under router, browser-based projects have two elements, hash router, and browser router. Hash router is used for static websites and Browser router is used for dynamic URLs.
Route: Route is an essential component of the router. It is used to define and render content-based paths. The following code is used for Route.
<Route path=’/page’ component={Page} />
<Route path=’/page’ render={() => {
return (<h1> W9 Adda </h1>)
}}/
Link: The link component is utilized to build links. This allows the users to navigate different URLs and render their contents without the need of reloading the page.
Step 3: Now open the browser and enter the URL.
How To Set Up Routing For An App?
To set routing for an app these three steps are involved:
1) Install react-router: To install the router use the below code and run it on the command prompt window.
“C:\Users\username\Desktop\reactApp>npm install react-router”
2) Create components: React-router has 4 kinds of components, first one is the “app” component which is used as a tab menu, and the other three are home, about, and contact. These are rendered as the route changes.
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import Router, Route, Link, browserhistory, IndexRoute from react-router
class App extends React. Component {
render() {
return (
<div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
{this.props.children}
</div>
)
}
}
export default App;
class Home extends React. Component {
render() {
return (
<div>
<h1>Home…</h1>
</div>
)
}
}
export default Home;
class About extends React. Component {
render() {
return (
<div>
<h1>About…</h1>
</div>
)
}
}
export default About;
class Contact extends React.Component {
render() {
return (
<div>
<h1>Contact…</h1>
</div>
)
}
}
export default Contact;3) Add router: This step includes the addition of routes to the app and also sets components for each route.
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = “/” component = {App}>
<IndexRoute component = {Home} />
<Route path = “home” component = {Home} />
<Route path = “about” component = {About} />
<Route path = “contact” component = {Contact} />
</Route>
</Router>
), document.getElementById(‘app’))After completion of the above steps, it displays the window like,
Also, Read – How to Accelerate Your Custom Software Development Project
Benefits of React Router:
- You can efficiently handle the nested views and progressive resolution of views by using Router.
- You don’t need to set any history as it contains the browser history.
- This router requires only a single child element.
- With the help of this router, you can navigate the internal links in the application.
Conclusion
This article explains react-router and its installation. If you want to efficiently navigate throughout a React app, skip the anchor tags and use them.
It is clean, organized, and it makes adding and eliminating pages a lot easier. We hope that this article provides information about the react-router, and how you can successfully install it.
