What is Link in React Js?

On our web page, it’s often required to move to different web pages. We require some internal or external links throughout our page. Normally, the anchor tag or <a></a> performs the task. But the problem with this tag is that it refreshes the entire page when the link is clicked. React has a library- React Router that performs a better job. It provides a Link component that will only update the components that need re-rendering. For instance, the header and footer will remain the same for all web pages in our app and only the contents will change based on the specific route. So this makes our app faster and efficient.

How to implement the Link on our web page?

Firstly, we will have to install react-router-dom in our app.

npm install react-router-dom

After that, we will create two javascript files- Home.js and Contact.js in our app. We will import these files and the necessary libraries in index.js as follows.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from './Home';
import Contact from './Contact';
import Header from './App';

We will use the render function of ReactDOM imported in line 2. Now as you can see, we imported BrowserRouter, Switch, and Route from the react-router-dom library. BrowserRouter wraps the entire div on which we want to perform routing. The switch component works like a switch statement. It only renders the first Route that matches the path and ignores the others. It is useful when we have nested routes. The route conditionally renders the component when the path matches. Look at the following code.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from './Home';
import Contact from './Contact';
import Header from './App';
ReactDOM.render(
    <BrowserRouter>
       <Header/>
       <Switch>
              <Route exact path="/" component={Home}/>
              <Route exact path="/contact" component={Contact}/>
      </Switch>
    </BrowserRouter>,
    document.getElementById('root')
);

Notice that the Header component is always rendered no matter what the path is.

Now we will create app.js.

import React from 'react';

const App = () => {
    return (
        <div>
            <p>Welcome</p>
        </div>
    )
}

export default App;

Home.js

import React from 'react';
import {Link} from 'react-router-dom';

const Home = () => {
    return (
        <div>
            <p>I am home page</p>
            <Link to="/contact">Contact</Link>
        </div>
    )
}

export default Home

Contact.js

import React from 'react'
import {Link} from 'react-router-dom';
const Contact = () => {
    return (
        <div>
            <p>I am contact page</p>
            <Link to="/">Home</Link>
        </div>
    )
}

export default Contact

The output would look like this:

After clicking on Contact,

Conclusion:

As a result, you can see that the URL and body change but the header part is kept constant. As we click on home or contact, the respective component renders. The welcome on the top remains there as it is. This is the use of the Link component of React. The path, written in the ‘to’ property of Link matches with the ‘path’ property of Route. You can go through React-Link for more examples.

4 responses to “What is Link in React Js?”

1. sev says:

   July 4, 2021 at 2:35 am

   this helped a lot… thanks!!!
   I was struggling with the syntax but you really simplified it for me

   Reply
2. Muskan Garg says:

   July 5, 2021 at 2:03 pm

   Thank You. Glad to hear that it helped you.

   Reply
3. Adam says:

   November 18, 2021 at 3:08 am

   This didn’t work for me until I uninstalled react-router-dom ( npm uninstall react-router-dom )and reinstalled it as npm install [email protected]

   Apparently Switch was changed to Routes in V6.0 in addition to some other changes.

   Reply
   • tttttttt says:

     February 7, 2023 at 6:09 pm

     npm install [email protected] is fine

     Reply