reactjs - React Router v4 renderiza múltiples rutas

react-router react-router-dom

Question

Estoy creando un SPA y estoy tratando de configurar el enrutamiento en la aplicación usando el paquete react-router-dom versión 4.1.1 .

Mi definición de ruta está abajo:

<BrowserRouter>
  <div>
    <Route exact path="/" component={Login} />
    <Route path="/login" component={Login} />
    <Route path="404" component={NotFound} />
    <Route path="*" component={NotFound} />
  </div>
</BrowserRouter>

Básicamente, quiero configurar el enrutamiento para que cualquier solicitud a una página para la que no se haya definido una ruta vaya al componente {NotFound} .

¿Cómo se puede lograr esto? La solución anterior representa tanto el Login como el componente NotFound al solicitar la página /login .

Saludos cordiales

Answer 1

Aquí hay un ejemplo del tutorial oficial , cómo evitar renderizar múltiples rutas

import { Switch, Route } from ''react-router

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

Answer 2

Creo que la página NotFound se representa debido a la <Route path="*" component={NotFound} /> regla. La propiedad de ruta del enrutador acepta cualquier ruta URL válida que comprenda path-to-regexp. Entonces ''*'' significa cero o más coincidencias de parámetros

Answer 3

Utilice Switch para representar la primera coincidencia de la ruta. Debe importar Switch antes de usar

import {Switch} from ''react-router'';

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={Login} />
    <Route path="/login" component={Login} />
    <Route path="404" component={NotFound} />
    <Route path="*" component={NotFound} />
  </Switch>
</BrowserRouter>

De acuerdo con los docs

<Switch> es único en el sentido de que representa una ruta exclusivamente. Por el contrario, cada <Route> que coincide con la ubicación se representa de manera inclusiva.

Ahora, si estamos en /login , <Switch> comenzará a buscar una <Route> coincidente. <Route path="/login"/> coincidirá y <Switch> dejará de buscar coincidencias y mostrará <Login> . de lo contrario, la ruta coincide /login con /login y * y representa ambas rutas

Sin embargo, cuando utilice Cambiar el orden de las rutas, asegúrese de agregar las rutas de prefijo después de las otras rutas. Por ejemplo, ''/ home'' debe estar después de ''/'' en el orden de la ruta o, de lo contrario, puede utilizar el accesorio exact

 <Switch>
    <Route exact path="/" component={Login} />
    <Route path="/home" component={Home} />
  </Switch>