Estoy intentando representar un componente cuando ingreso una url que no existe. Sin embargo, el componente sigue representando en todas las rutas. estoy usando[email protected]. Estas son las rutas que configuré:

import * as React from "react";
import { Route, RouteComponentProps } from "react-router-dom";
import glamorous from "glamorous";
import ElementList from "./elementlist";
import AddElement from "./addelement";
import NotFound from "./NotFound";

const Styling = glamorous.div({
  minHeight: 5,
  minWidth: 8
});

const NavRouter = () => (
  <Styling>
    <Route path="/" exact={true} component={ElementList} />
    <Route path="/addelement" component={(props: 
       RouteComponentProps<{}>) => (
         <AddElement onSubmitSuccess={() => props.history.push("/")} />
       )} />
    <Route path="*" exact={true} component={NotFound}/>
  </Styling>
);

export default NavRouter;

Este es miNotFound componente:

import * as React from "react";


const NotFound = () => (
  <h1>The page that you are looking is not there.</h1>
);

export default NotFound;

El problema que estoy enfrentando actualmente es que el mensaje:The page that you are looking is not there. sigue apareciendo en el/ y/addelement ruta cuando cambié la URL. Me cuesta mucho hacer que el mensaje aparezca solo cuando voy a una ruta que no está definida. Inicialmente, intenté cambiar las rutas y hacer la ruta más "detallada" en la parte superior de esta manera:

const NavRouter = () => (
  <Styling>
    <Route path="/addelement" component={(props: 
       RouteComponentProps<{}>) => (
         <AddElement onSubmitSuccess={() => props.history.push("/")} />
       )} />
    <Route path="/" exact={true} component={ElementList} />
    <Route path="*" component={NotFound}/>
  </Styling>
);

Sin embargo, no resolvió el problema. ¿Hay alguna manera de evitar que el mensaje aparezca en cada ruta a la que voy, excepto en las rutas que no están definidas?