Learn React with TypeScript 3

Using the Link component

We are going to use the Link component from React Router to create our navigation options by carrying out the following steps:

1. Let's start by creating a new file called Header.tsx with the following imports:

import * as React from "react";import { Link } from "react-router-dom";import logo from "./logo.svg";

2. Let's create two links using the Link component in a Header function component:

const Header: React.SFC = () => {  return (    <header className="header">      <img src={logo} className="header-logo" alt="logo" />      <h1 className="header-title">React Shop</h1>      <nav>        <Link to="/products" className="header-         link">Products</Link>        <Link to="/admin" className="header-link">Admin</Link>      </nav>    </header>  );};export default ...