Languages
[Edit]
EN

React - route and link difference

3 points
Created by:
Dirask Community
6240

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 (
    <Router>
      <div className="App">
        <div className="App-menu">
          <ol>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/page1">Page 1</Link></li>
          </ol>
        </div>
        <Route exact path='/' component={Home} />
        <Route path='/page1' component={Page1} />
      </div>
    </Router>
  );
};

export default App;

Notes:

  • 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.

ReactJS

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.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join