Can We Use React Router <Link> Instead of <a> for Better App Performance?

Built for Shopify
1

I’m working on optimizing my Shopify app’s navigation and improving its performance. Initially, I was using traditional <a> tags for navigation, but now I’ve switched to React Router’s <Link> component.

can we use this approach?

<NavMenu>
     <Link to="/" rel="home">Home</Link>
     <Link to="/product">Products</Link>
</NavMenu>
2

Sure.

Just a tip: you can add key prop to NavMenu to prevent full page reloading when navigating.

import { useLocation, Link } from 'react-router-dom';

const location = useLocation();

<NavMenu key={location.key}>
  <Link to="/" rel="home">Home</Link>
  <Link to="/product">Products</Link>
</NavMenu>
1 Like
3

Thank you for the tip! I really appreciate your help. Adding the key prop to NavMenu makes perfect sense, and I’ll implement it right away. Thanks again for your support!