Reaccionar: diferencia entre <Ruta de ruta exacta = "/" /> y <Ruta de ruta = "/" />

161

¿Alguien puede explicar la diferencia entre

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

y

<Route path="/" component={Home} />

No sé el significado de "exacto"

reactjs react-router react-router-dom batt
fuente
1
Las respuestas son geniales. Sin embargo, uno puede tener una duda como "¿Por qué no podemos tener <code> exacto </code> para todas las rutas entonces?" Imagine una URL que sea algo como esto. <code> yourreactwebsite.com/getUsers/userId= ? </code> Este es un ejemplo en el que la ID del usuario se alimentará dinámicamente en la URL y, por lo tanto, no podemos ir con el apoyo <code> exacto </code> en su enrutador aquí.
VIJAYKUMAR REDDY ALAVALA

Respuestas:

263

En este ejemplo, nada realmente. losexact parámetro entra en juego cuando tienes múltiples rutas que tienen nombres similares:

Por ejemplo, imagine que tenemos un Userscomponente que muestra una lista de usuarios. También tenemos un CreateUsercomponente que se utiliza para crear usuarios. La url para CreateUsersdebe estar anidada debajo Users. Entonces 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 al http://app.com/usersenrutador, pasará por todas nuestras rutas definidas y devolverá la PRIMERA coincidencia que encuentre. Entonces, en este caso, Usersprimero encontraría la ruta y luego la devolvería. Todo bien.

Pero, si fuéramos http://app.com/users/create, volvería a pasar por todas nuestras rutas definidas y devolvería la PRIMERA coincidencia que encuentre. React router hace una coincidencia parcial, por /userslo que coincide parcialmente /users/create, por lo que devolvería la Usersruta de forma incorrecta .

El exactparámetro deshabilita la coincidencia parcial para una ruta y se asegura de que solo devuelva la ruta si la ruta es una coincidencia EXACTA con la url actual.

Entonces, en este caso, debemos agregar exacta nuestra Usersruta para que solo coincida con /users:

<Switch>
  <Route exact path="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>

Los documentos explican exacten detalle y dan otros ejemplos.

Chase DeAnda
fuente
11
"Pero, si fuéramos a app.com/users/create , volvería a pasar por todas nuestras rutas definidas y devolvería la PRIMERA coincidencia que encuentre". - de hecho, devolverá todas las rutas para las que encontró una coincidencia (total o parcial). El comportamiento descrito por @Chase DeAnda solo ocurrirá si los <Route> están encerrados por una etiqueta <Switch>.
watsabitz
44
exactdebería ser el valor predeterminado en mi opinión
Alexander Derck
¿Qué pasa si tenemos cada definición de ruta en diferentes componentes, quiero decir /admin//usersen el componente Administrador y /admin/users/createen el componente raíz? Actualmente tengo esta situación y la exactsolución típica no funciona correctamente.
Yulio Aleman Jimenez
Creo que este comportamiento solo funciona si ambas rutas están en el mismo nivel de su padre (o componente)
Switch
1
@ChaseDeAnda lo que necesito es exactamente lo contrario. Tal vez debería escribir una nueva respuesta en SO para aclarar mi situación y obtener respuestas adecuadas.
Yulio Aleman Jimenez
7

En resumen, si tiene múltiples rutas definidas para el enrutamiento de su aplicación, encerradas con un Switchcomponente 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 poner una exactpalabra clave en la ruta, cuya ruta también está incluida en la ruta de otra ruta. Por ejemplo, la ruta de inicio /se incluye en todas las rutas, por lo que debe tener una exactpalabra clave para diferenciarla de otras rutas que comienzan con /. La razón también es similar a la /functionsruta. Si desea usar otra ruta de ruta como /functions-detailo /functions/open-doorque incluye /functionsen ella, entonces debe usarla exactpara la /functionsruta.

milkersarac
fuente
-1

La respuesta más corta es

Por favor intente esto. 

<switch>
   <Route exact path="/" component={Home} />
   <Route path="/about" component={About} />
   <Route path="/shop" component={Shop} />
 </switch>
Jamal Sheikh Ali
fuente
1
Esto básicamente no hace nada para explicar el significado del exactatributo / accesorio y, por lo tanto, seguramente no es una "respuesta". Debería tratar de abordar la pregunta que realmente se está haciendo en lugar de dar una solución a un problema que no está seguro de que OP realmente tenga.
Victor Zamanian