Understanding Links in React.js
Routing helps determine which code should run when a URL is visited. In this guide, you will learn more about how routing works in React.
Oct 8, 2020 • 5 Minute Read
Introduction
Links are everywhere on the web. They are vital in locating resources such as web pages, images, and videos—not to speak of their importance in SEO. Routing helps determine which code should run when a URL is visited. In this guide, you will learn more about how routing works in React.
Links in React
In regular apps without a library like React, links are created with an anchor tag, as shown below.
<a href="https://pluralsight.com">Visit Pluralsight</a>
Bear in mind that this also works in React. This method of routing causes a full page refresh, when in reality the only thing that changed on the new route might be just an image and some text. In some cases, a full page refresh is useful, but in most cases, it's not needed. React is a component-oriented library and implements a neat algorithm by keeping track of your elements as a tree and figuring out which components need re-rendering. Libraries such as React Router take advantage of this to help your app render components that need re-rendering based on a specified route. Very efficient, isn't it?
In short, if your app uses the same header and footer for all pages, you can ensure that only the body of your pages re-render while the header and footer remain intact.
Building a Sample App
Setup a React app by entering the following command or entering react.new in your browser to set up a React development environment on codesandox.io.
npx create-react-app [YOUR_APP_NAME] && yarn add react-router-dom
Add the following code block to your index.js file.
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import {Homepage, Aboutpage } from './App';
ReactDOM.render(
<Router>
<Switch>
<Route exact path="/" component={Homepage}/>
<Route exact path="/about" component={Aboutpage }/>
</Switch>
</Router>,
document.getElementById('root')
);
Now add the following code snippet to your App.js file to create the components for the pages.
import React from 'react';
import { Link } from 'react-router-dom';
const Header = () => {
return (
<div>
<p>Header</p>
</div>
)
};
const Homepage = () => {
return (
<div>
<Header/>
<h1>Homepage </h1>
<Link to='/about'>Go to Aboutpage</Link>
</div>
)
};
const Aboutpage = () => {
return (
<div>
<Header/>
<h1>Aboutpage</h1>
<Link to='/'>Go to Aboutpage</Link>
</div>
)
};
export {Homepage, Aboutpage } ;
Run your development server and open your app in the browser. Notice how changing routes does not cause a full page reload.
Cleaning Up to Avoid Unecessary Rendering
You've made use of routes to render specific components for each route. But there's a problem somewhere 🤔. The </Header> component has to render every time a route changes, but its content doesn't change. Edit your App.js and index.js files, respectively, as shown below.
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import {Homepage, Aboutpage, Header } from './App'; //new
ReactDOM.render(
<Router>
<Switch>
<Header/> //new
<Route exact path="/" component={Homepage}/>
<Route exact path="/about" component={Aboutpage }/>
</Switch>
</Router>,
document.getElementById('root')
);
import React from 'react';
import { Link } from 'react-router-dom';
const Header = () => {
return (
<div>
<p>Header</p>
</div>
)
};
const Homepage = () => {
return (
<div>
<h1>Homepage </h1>
<Link to='/about'>Go to Aboutpage</Link>
</div>
)
};
const Aboutpage = () => {
return (
<div>
<h1>Aboutpage</h1>
<Link to='/'>Go to Aboutpage</Link>
</div>
)
};
export {Homepage, Aboutpage , Header } ; //new
What you've done is you've made sure that when a new route is visited, it only renders the respective page and not the header, as it seldom changes state.
Conclusion
Whew! That's it. You should now get the concept of links in React and how to handle routing effectively.
Feel free to ping me on twitter @DesmondNyamador if you want chat more on this topic.
Learn More
Explore these React courses from Pluralsight to continue learning:
