):
аюсь отобразить компонент, когда я ввожу URL, который не существует. Тем не менее, компонент продолжает рендеринг на всех маршрутах. я использую[email protected]
, Это маршруты, которые я настроил:
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;
Это моеNotFound
составная часть:
import * as React from "react";
const NotFound = () => (
<h1>The page that you are looking is not there.</h1>
);
export default NotFound;
Проблема, с которой я сейчас сталкиваюсь, заключается в том, что сообщение:The page that you are looking is not there.
продолжает появляться на/
а также/addelement
маршрут, когда я изменил URL. Я с трудом пытаюсь заставить сообщение появиться, только когда иду по маршруту, который не определен. Сначала я попытался переключить маршруты и сделать более «подробный» маршрут вверху, например:
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>
);
Однако это не решило проблему. Есть ли способ предотвратить появление сообщения на каждом маршруте, по которому я иду, кроме маршрутов, которые не определены?