¿Alguien puede explicar la diferencia entre
<Route exact path="/" component={Home} />y
<Route path="/" component={Home} /> No sé el significado de exact .
En este ejemplo, nada realmente. El parámetro exact entra en juego cuando tienes varias rutas que tienen nombres similares:
Por ejemplo, imagine que tenemos un componente Users que muestra una lista de usuarios. También tenemos un componente CreateUser que se usa para crear usuarios. La url para CreateUsers debe anidarse en Users . Así que nuestra configuración podría verse así:
<Switch> <Route path="/users" component={Users} /> <Route path="/users/create" component={CreateUser} /> </Switch> Ahora, el problema aquí, cuando vamos a http://app.com/users , el enrutador pasará por todas nuestras rutas definidas y devolverá la PRIMERA coincidencia que encuentre. Entonces, en este caso, primero encontraría la ruta de los Users y luego la devolvería. Todo bien.
Pero, si fuéramos a http://app.com/users/create , volvería a pasar por todas nuestras rutas definidas y devolvería la PRIMERA coincidencia que encuentre. El enrutador React hace una coincidencia parcial, por lo que /users coincide parcialmente con /users/create , por lo que devolvería incorrectamente la ruta de los Users nuevamente.
El parámetro exact desactiva la coincidencia parcial de una ruta y se asegura de que solo devuelva la ruta si la ruta coincide EXACTAMENTE con la URL actual.
Entonces, en este caso, debemos agregar la ruta exact a nuestra ruta Users para que solo coincida con /users :
<Switch> <Route exact path="/users" component={Users} /> <Route path="/users/create" component={CreateUser} /> </Switch> Los documentos explican exact en detalle y dan otros ejemplos.
En resumen, si tiene varias rutas definidas para el enrutamiento de su aplicación, junto con el componente Switch como este;
<Switch> <Route exact path="/" component={Home} /> <Route path="/detail" component={Detail} /> <Route exact path="/functions" component={Functions} /> <Route path="/functions/:functionName" component={FunctionDetails} /> </Switch> Luego, debe colocar la palabra clave exact en la ruta, cuya ruta también está incluida en la ruta de otra ruta. Por ejemplo, la ruta principal / se incluye en todas las rutas, por lo que debe tener la palabra clave exact para diferenciarla de otras rutas que comienzan con / . La razón también es similar a la ruta /functions . Si desea usar otra ruta de ruta como /functions-detail o /functions/open-door que incluye /functions , entonces necesita usar exact para la ruta /functions .
Eche un vistazo aquí: https://reacttraining.com/react-router/core/api/Route/exact-bool
exacto: bool
Cuando es verdadero, solo coincidirá si la ruta coincide exactamente con location.pathname .
**path** **location.pathname** **exact** **matches?** /one /one/two true no /one /one/two false yes