React - route and link difference

3 points
Created by:

In this article, we would like to show you the difference between Route and Link in React.

  • <Route> is an element that renders some components when a current URL matches the route's path.
  • <Link> is an element used to navigate through routes.

In below example our App component returns <Router> which is the main component for our routing. Inside <Router> we create ordered list containing <Link> elements to the specific routes.
As we see <Link> tags don't specify the content we want to display, they are used only to navigate through the routes. <Route> element is the one that specifies the content which we want to display when <Link> element's path matches to it's path.

Practical example:

import React from 'react';
import { Route, Link, BrowserRouter as Router } from 'react-router-dom';
import Home from './Pages/Home.js';
import Page1 from './Pages/Page1.js';

const App = () => {
  return (
      <div className="App">
        <div className="App-menu">
            <li><Link to="/">Home</Link></li>
            <li><Link to="/page1">Page 1</Link></li>
        <Route exact path='/' component={Home} />
        <Route path='/page1' component={Page1} />

export default App;


  • to use routing don't forget to install react-router-dom library first.
    You can do this with npm install react-router-dom command.
  • exact property means the path necessary to display specific route component must be matched 1 to 1.
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.


React - route and link difference
Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

â€ïžđŸ’» 🙂