import * as React from 'react';
import {NavLink} from 'react-router-dom'

export const Header = () => (
    <nav>
        <NavLink exact to="/" activeClassName="active">Home</NavLink>
        {" | "}
        <NavLink to="/about" activeClassName="active">About</NavLink>
    </nav>
);
import * as React from 'react';
import {NavLink} from 'react-router-dom'

export const Header = () => (
    <nav>
        <NavLink to="/" activeClassName="active">Home</NavLink>
        {" | "}
        <NavLink to="about" activeClassName="active">About</NavLink>
    </nav>
);
--- 
+++ 
@@ -3,8 +3,8 @@
 
 export const Header = () => (
     <nav>
-        <NavLink to="/" activeClassName="active">Home</NavLink>
+        <NavLink exact to="/" activeClassName="active">Home</NavLink>
         {" | "}
-        <NavLink to="about" activeClassName="active">About</NavLink>
+        <NavLink to="/about" activeClassName="active">About</NavLink>
     </nav>
 );
Update path to match the routes
