Creating navigation

React Router comes with components called Link and NavLink, which provide navigation. In this section, we will create a navigation bar at the top of the app containing the Link component from React Router. We will then swap Link for the NavLink component and understand the difference between the two components.

Using the Link component

Carry out the following steps to create an app header containing React Router’s Link component:

1. Start by creating a file for the app header called Header.tsx in the src folder containing the following import statements:

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

   import logo from './logo.svg';

We have imported the Link component from React Router.

We have also imported the React logo because we will include this in the app header with the navigation options.

2. Create the Header component as follows:

   export function Header() {

     return (

       <header className...