Por que meu componente continua renderizando em todas as rotas?
Estou tentando renderizar um componente quando insiro um URL que não existe. No entanto, o componente continua sendo renderizado em todas as rotas. estou usando[email protected]
. Estas são as rotas que eu configurei:
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 é meuNotFound
componente:
import * as React from "react";
const NotFound = () => (
<h1>The page that you are looking is not there.</h1>
);
export default NotFound;
O problema que estou enfrentando atualmente é que a mensagem:The page that you are looking is not there.
continua aparecendo no/
e/addelement
rota quando mudei o URL. Estou com dificuldade para fazer com que a mensagem apareça apenas quando vou para uma rota que não está definida. Inicialmente, tentei alternar as rotas e criar a rota mais "detalhada" na parte superior, assim:
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>
);
No entanto, não resolveu o problema. Existe uma maneira de impedir que a mensagem apareça em todas as rotas para as quais vou, exceto nas rotas que não estão definidas?