React router: Complete guide for beginners
React router is a navigation library for react applications. It enables the operation of dynamic routing in web applications. It has a set of components that are utilized for navigation in a react app. These components are involved in the React app declaratively. When you add it in a page link or bookmark to an element in the Interface, then the routine of the target page is done with React router.
For excellent outcomes, it uses component-based structures. This architecture offers a responsive component of the navigation of the React app. When you clock a link in the Interface to visit a section of a specific component is called. That displays the relevant information on the screen. It is an API that is capable of syncing the links to the Interface of the React app.
Why utilize a React router?
The React router is efficient in routing in single-page applications. It has features like client-side routing and dynamic navigation that allows you to navigate in the react app. It avoids the need for refreshing the entire page to visit a section of the react app. React’s router avoids the need for you to press the refresh or back buttons. With the functionality of efficient routing, you can traverse a page seamlessly.
Installation
React routers can be quickly installed in the project with the use of the npm command. This package involves the routing and navigating functionalities to the react app. To install the react-router, you must set up the react project by downloading the package manager and the dependencies. Then write the following code ;
npm install –save react-router
But it is not recommended to download it directly when you are developing a web app. At such an instance, you should install the react-router dom as a dependency in your project.
yarn add react-router-dom
npm install react-router-dom
similarly, when you are developing a mobile app, then also you will need to install the react router dependency.
Using the react router
For using the react router, you should install the package in the project field. After this, you have to write the components for the react router. Here you can create an app component that has three fields home about, and contact. These three components are created for routing in the react application. Hence in the major component, you will have to type the code:
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;
The app.js component in the react project contains the links to the destination of the sun components. After this, you are supposed to integrate the router into the components. The advantage of adding a router to the component is that react renders only the router component.
Instead of the main component. This saves the time taken by the compiler and improves the efficiency of the react app. For adding routers refer to the below-provided sample code structure.
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’))
This code will display a clickable link in the Interface named and home, about, and contact. In the react router the packages, routes, and navigation directories are imported, this assures perfect navigation. And then the components of the Interface is integrated to a route with the use of the following comonad line,
<Route exact path=”/specifiedPath” component={componentName} />
With this syntax, only the components that are called; component (componentName), is rendered. Thus, there is not a need to render every component for navigation. React Router then imports the paths from the router function to the main component.
Main components of react router
BrowserRouter: BrowserRouter is a component that uses HTML5 for linking the API to the Interface of the reactjs application. It is the chief component in the router structure because all the sub-components are written inside this component. This component has props such as pushstate, popstate, and replace the state.
Router: Router is a navigation element that renders the compounded when the URL of the component corresponds to its path.
<Route exact path=’/’ component={Home}></Route>
<Route exact path=’/about’ component={About}></Route>
<Route exact path=’/contact’ component={Contact}></Route>
Link: It functions similar to the <A> tag from HTML. This component is used to link the component to a specific URL and allow the routing in the React app. The structure of a link component is as follows:
<div className=”App”>
<ul>
<li>
<Link to=”/”>Home</Link>
</li>
<li>
<Link to=”/about”>About Us</Link>
</li>
<li>
<Link to=”/contact”>Contact Us</Link>
</li>
</ul>
</div>
Switch: this component renders only the initial component whose route is matched to a particular component. This avoids rendering of every component in the React router structure. However, the link used in a React app will always be different from each of the components. Therefore there is no place for the failure of the Switch component. This tag is useful when there are several statements with URLs.
Final Verdict
The react router is an excellent library for the implementation of links in our react app. With the use of this routing facility, you can navigate among a large group of links and URLs in an optimal manner. It is excellent of developing Single page application as navigation in a SPA has to be smooth.
React router provides you with the capability to involve the ability to redirect a user in an elegant and convenient way. Besides this, you do not have to be concerned regarding the performance of the React app.
