React

React Router Link – All you need to know about it

<Link> is a functional component of react-router-dom library. It is used to create menu navigation in your application.

A very simple example of Link is below.

<ul>
          <li>
            <Link to="/services">My services</Link>
          </li>
          <li>
            <Link to="/products">My Products</Link>
          </li>		  
        </ul>

Here we are creating two links, one to services URL and one to products URL We need to create corresponding routes for these paths as below.

 <Switch>
          <Route path="/services">
            <Services/>
          </Route>
          <Route path="/products">
            <Products/>
          </Route>           		   
        </Switch>

Both of these has to be wrapped by Router. Below is a complete working example.

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link 
} from "react-router-dom";



export default function App() {	
    return (
	<div>
    <Router> 	   
        <ul>
          <li>
            <Link to="/services">My services</Link>
          </li>
          <li>
            <Link to="/products">My Products</Link>
          </li>		  
        </ul>

        <Switch>
          <Route path="/services">
            <Services/>
          </Route>
          <Route path="/products">
            <Products/>
          </Route>           		   
        </Switch>
		
		</Router>
		</div>
		);
}

function Services() {
	return <p>I provide awesome services at uour doorstep</p>
}

function Products() {
	return <p>My products are better than Google, Microsoft & Amazon</p>
}

The Link component has one attribute to. You can specify the string URL path as we have specified above, or you can also specify an object to it. In the object you can put path string, query params, hash, as well as state to be stored for location.

<Link
  to={{
    pathname: "/services",
    search: "?sort=serviceid",
    hash: "#myservice",
    state: { fromHome: true }
  }}
/>

You can also specify a function to the to attribute. The function would get the location as an argument and would return location as String or Object.

There is replace attribute which controls the history stack maintained in Routing. As the name implies if replace is true, then when the user clicks on the Link, it will replace the current entry of current stack instead of adding a new one on top of it. This will impact your back forward functionality behavior.

<Link to="/products" replace />

Just like the <a> element, you can specify various attributes to Link element and pass on react props to Link component. Examples of such props are title, id, className or any other props that need to be on the <a> element.

If you want to apply a class to Link only when it’s corresponding Route is active, then use activeClassName property. In case you want to directly apply the style to a Link when it’s Route is active, then use activeStyle property.

In case you want to call a function when user clicks on Link, then you can use the onClick property to specify the function. As like in regular functions you can call e.preventDefault() to prevent the regular transition.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tagged ,

Leave a Reply

Your email address will not be published. Required fields are marked *