React Router v4 representa múltiples rutas

Estoy creando un SPA y estoy intentando configurar el enrutamiento en la aplicación usando la react-router-domversión del paquete 4.1.1.

Mi definición de ruta está a continuación:

<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 cual no hay una ruta definida vaya al {NotFound}componente.

¿Cómo se puede lograr esto? La solución anterior representa tanto el componente Logincomo el NotFoundcomponente al solicitar la /loginpágina.

Atentamente

May 16 '17 14:05 Complexity

Aquí hay un ejemplo del tutorial oficial , cómo evitar representar 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>

May 16 '2017 07:05 Taras Yaremkiv

Utilice para Switchrepresentar la primera coincidencia de la ruta. Debe importarla Switchantes de usarla.

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>

Según los documentos

<Switch>es único porque representa una ruta exclusivamente. Por el contrario, todo <Route>lo que coincida con la ubicación se representa de forma inclusiva.

Ahora, si estamos en /login, <Switch>comenzaremos a buscar una coincidencia <Route>. <Route path="/login"/>coincidirá y <Switch> dejará de buscar coincidencias y renderizar <Login>. de lo contrario, la ruta coincide /logincon /loginy *y representa ambas rutas

Sin embargo, cuando utilice Cambiar el orden de las Rutas, asegúrese de agregar el prefijo Rutas después de las otras Rutas. Por ejemplo, '/home' debe estar después de '/' en el orden de la ruta o, de lo contrario, podría utilizar la exactpropiedad

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

May 16 '2017 07:05 Shubham Khatri