Will React Hooks Replace React Router?
Introduction
After the rising usage of react hooks, many modifications have taken place. The problems have started arising, which was not the issue in the first place. The technology, as well as prospects that are Hooks oriented, has restructured the approach to some ideas which are used in React. Routing is considered one of those concepts which have evolved over the period.
This blog post is not about taking a dig at React router or criticizing its significance. There are some other options to enhance the routing experience in React app with the use of Hooks.
It is needless to say that react router gives an adequate performance when it comes to routing, which has helped build a substantial community around it; however, the rapidness of the newly Hook router is unavoidable. With the demo objectives, the references to the react router and hook router will be made. Here is in-depth information about the React router and routing in React.
What is React Routing?
React routing is a procedure for displaying different pages on the corresponding URL. The React developers are granted the freedom to routing through the pages by writing the URL or selecting the element themselves. The developers are compelled to install the react-router library to support the routing through the React application.
It is fundamentally a declarative way of controlling the routes in React apps. Moreover, the react routers transfer three essential components that enable the routing experience easy, which are Route, Link, and browser Router. Therefore, the user should hire react developers to gain the remarkable experience of the best javascript framework.
How to install react-router-dom?
React- router-dom can be installed using npm or yarn. In addition to that, run the commands which are given below. And the installation of the router successfully gets done.
|
yarn add react-router-dom OR npm install react-router-dom |
Let us proceed with the fundamentals of react router.
React Router: Fundamentals!
- Router component:
In Reactjs Development Company, there are only two components that are used: the browser component and the hash component. We are supposed to wrap a <app> component with the component. Hence, the browser component will be used below:
// /src/index.js
import React from “react”;
import ReactDOM from “react-dom”;
import App from “./App”;
import { BrowserRouter as Router } from “react-router-dom”;
ReactDOM.render(
< Router >
< App / >
< /Router >,
document.getElementById(“root”)
);
The wrap of the <app> component gets done after the import of the component from react-router-dom. We can use routing to the entire application just like this.
The reactjs developer has full liberty to direct use the Browser router. The history object will be created by the above code for the component. Each <router> component is created for the wrap of a parent component, here which is the <app> component. The <router> component helps generate the numerous prior locations. It also keeps track of the current location (history. location).
Every time the current location gets altered, re-rendering of the view also occurs. Moreover, you can also behold the navigation between pages.
The question must be aroused about the frequent varying of the current location. What causes the recurring changes in the current location?
An answer is a history object which is comprised of two modes: history.push and history.replace.
- Link and Route component
Among the many react router components, the <route> component is deemed a crucial component. Its job is to furnish the UI whose location is up to date with the path of the route.
The navigation between the pages can be possible because of the <link>component in the React Router. There are many similarities between the functions of <link> component and <a>tag of the HTML. The only distinction is that the pages are refreshed using <a>, which is not required for navigating between the pages. Hence, the <link> component will be used for the navigation without refreshing the page.
// /src/App.js
import React from “react”;
import { Link, Route, Switch } from “react-router-dom”;
const Home = ( ) => (
< h2 >This is the Home page< /h2 >
);
const About = ( ) => (
< h2 >This is an About page< /h2 >
);
const Contact = ( ) => (
< h2 >This is the Contact Page < /h2 >
)
const Products = ( ) => (
< h2 >This is the Products Page < /h2 >
);
export default function App() {
return (
< div >
< nav >
< ul >
< li >
< Link to=”/” >Home< /Link >
< /li >
< li >
< Link to=”/about” >About< /Link >
< /li >
< li >
< Link to=”/contact” >Contact< /Link >
< /li >
< li >
< Link to=”/products”>Products< /Link >
< /li >
< /ul >
< /nav >
{ /* when the path prop will match the current URL these components will render */}
< Route path=”/” > < /Route >
< Route path=”/about” >< About/ >< /Route >
< Route path=”/contact” >< Contact/ >< /Route >
< Route path=”/products” >< Products/ >< /Route >
< / div >
);
}
What is Dynamic Nested Routing?
Before proceeding with the dynamic nesting routing, one should be well acquainted with it. Th <route> only delivers a component when the path matches. It nullifies the component in case of a mismatch. The collection of records associated with the react router says that:
If you want to render something with a, then the use of children’s elements is a highly suggested process. Nevertheless, there are some other modes as well which are used to render something using a. The provision of such modes mostly enables the necessary support to the react apps, which were developed with the prior versions of the React router.
Here are those methods which are used for the previous react router versions before the existence of Hooks:
- Component:
With the help of React.creatElement, the router generates react elements by using components. If the URL matches, the component gets rendered. If an assigned function returns a component, then the new component gets generated without updating it.
< Route path=”/products” component={Products} / >
- Render:
The problem of remounting the component gets resolved using the render method. It doesn’t allow updating the component. It gives permission to inline rendering.
< Route path=”/products” render={() => < Products / >} / >
- Children:
There are some exceptions when one intends to render something regardless of matching or mismatching of the patch. When a user encounters such a case, then the children’s elements are exercised. Hence, the aforementioned bullets give you a brief knowledge about managing the elements to render different components. Let us be more familiar with the process of deploying Dynamic Nested Routing.
To get a clear understanding of dynamic nested writing, go back to an example that is mentioned above to classify the products into sub-categories. That instance will be carried on for nested routing as well.
// /src/App.js
import React from “react”;
import { Link, Route, Switch } from “react-router-dom”;
import Products from “./Products”;
const Home = () => (
< h2 >This is the Home page< /h2 >
);
const About = () => (
< h2 >This is an About page< /h2 >
);
const Contact = () => (
< h2 >This is the Contact Page < /h2 >
);
export default function App() {
return (
< div >
< nav >
< ul >
< li >
< Link to=”/” >Home< /Link >
< /li >
< li >
< Link to=”/about” >About< /Link >
< /li >
< li >
< Link to=”/contact” >Contact< /Link >
< /li >
< li >
< Link to=”/products” >Products< /Link >
< /li >
< /ul >
< /nav >
{ /* when the path prop will match the current URL these components will render */}
< Route path=”/” >< Home/ >< /Route >
< Route path=”/about”>< /Route >
< Route path=”/contact”>< /Route >
< Route path=”/products”>< /Route >
< / div >
);
}
The distinct component for the products is also generated to make them simple and precise.
The code for product.js is mentioned below:
// src/Products.js
import React from “react”;
import { Link, Route, useParams, useRouteMatch } from “react-router-dom”;
const Item = ( ) => {
const { name } = useParams();
return (
< div >
< h3 >{name}< /h3 >
< /div >
);
}
const Products = ( ) => {
const { url, path } = useRouteMatch();
return (
< div >
< ul >
< li >
< Link to={`${url}/product-one`}>Product One
< /li >
< li >
< Link to={`${url}/product-two`} >Product Two
< /li >
< /ul >
< Route path={`${path}/:name`} >
< Item/ >
< /Route >
< /div >
);
};
export default Products;
The useRouteMatch hook is implemented to match the URLs the same as <Route>. As mentioned earlier, React routing documentation states two cases of the useRouteMatch hook:
- No argument is taken by it, and the match object of current <route> is sent back.
- It considers a single argument, which is identical to the match path argument.
Router Hooks
The process of routing has become effortless as compared to the previous scenario. Now, the history, parameters, and location are easily manageable. To be able to use react router hooks, one must ensure the react version, which should be greater than or equal to 16.8.
Let’s take an overview of the react router hooks:
- useHistory
The useHistory hook enables the react developer to retrieve history for navigation. Hence, it’s not necessary to access history from the prop. The developer can just deploy the useHistory hook.
import { useHistory } from “react-router-dom”;
const Contact = () => {
const history = useHistory();
return (
<>
< h2 >About< /h2 >
< button onClick={() => history.push(‘/’) } >Go to homepage < /button >
)
};
- useParams
The object return of the URL parameter’s key/value pairs will be completed by the useParam. It doesn’t use the prop, which is the feature of react router component.
import { BrowserRouter as Router, Route, Link, Switch, useParams } from “react-router-dom”;
export default function App( ) {
const name = ‘James Ruso’
return (
< Router >
< div >
< nav >
< ul >
< li >< Link to=”/” >Dashboard< /li >
< li >< Link to={`/about/${name}`} >About < /li >
< /ul >
< /nav >
< Switch >
< Route path=”/” exact component={Dashboard}/ >
< Route path=”/about/:name” component={About}/ >
< /Switch >
< /div >
< / Router >
);
}
const About = ( ) => {
const { name } = useParams( )
return (
// props.match.params.name
< >
{ name !== ‘James Ruso’ ? < Redirect to= ” / ” /> : null }
< h2 >About {name} < /h2 >
< Route component={Contact} / >
< / >
)
};
- useLocation
The current location is returned to the React developer using the useLocation. The current location is obtained from the location object.
import { useLocation } from “react-router-dom”;
const About = ( ) => {
const { pathname } = useLocation();
return (
< >
< h1>About< /h1 >
< p >Here is the Current URL: {pathname}< /p >
< / >
)h
};
Conclusion!
If you are planning to create a multipage React website and want to leverage all the perks of the React library, then I have created this hands-on guide to get your hands on React Routing with Router hooks. Let’s go through this React Router Hooks tutorial and start learning!
ABOUT THE AUTHOR
