reactjs - react - ¿Por qué mi componente sigue renderizando en todas las rutas?

componentes en react

Question

Estoy intentando representar un componente cuando ingreso una URL que no existe. Sin embargo, el componente mantiene la representación 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 mi componente NotFound :

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 la ruta / y /addelement cuando cambié la URL. Me está costando hacer que el mensaje aparezca solo cuando voy a una ruta que no está definida. Inicialmente, traté de 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 forma de evitar que el mensaje aparezca en todas las rutas a las que voy, a excepción de las rutas que no están definidas?

Answer 1

Debe usar un componente <Switch> . Por la documentación:

¿Cómo es esto diferente a solo usar un montón de <Route> s?

<Switch> es único en el sentido de que representa una ruta exclusivamente . Por el contrario, cada <Route> que coincida con la ubicación se representa de forma inclusiva . Considera este código:

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

Si la URL es /about , entonces se <NoMatch> <About> , <User> y <NoMatch> porque todos coinciden con la ruta. Esto es por diseño, lo que nos permite componer <Route> s en nuestras aplicaciones de muchas maneras, como barras laterales y migas de pan, pestañas de arranque, etc.

Ocasionalmente, sin embargo, queremos elegir solo una <Route> para renderizar. Si estamos en /about , no queremos también hacer coincidir /:user (o mostrar nuestra página "404").

Por lo tanto, importarlo desde react-router-dom :

import { Route, RouteComponentProps, Switch } from ''react-router-dom'';

Luego, aplíquelo de esa manera (tenga en cuenta que no es necesario path="*" ):

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