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

redirect react

Question

Alguien puede explicar la diferencia entre

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

y

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

No sé el significado de "exacto"

Answer 1

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 estar anidada en Users . Entonces nuestra configuración podría verse así:

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

Ahora el problema aquí, cuando vamos a http://app.com/users el enrutador recorrerá 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 visitá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 lo que /users coincide parcialmente con /users/create , por lo que devolvería incorrectamente la ruta de los Users nuevamente.

El parámetro exact 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 exact a nuestra ruta de Users para que solo coincida con /users :

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

Los documentos explican exact en detalle y dan otros ejemplos.

Answer 2

En resumen, si tiene múltiples rutas definidas para el enrutamiento de su aplicación, incluidas 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 tiene que poner la palabra clave exact a la ruta, que su 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 exact palabra clave exact para diferenciarla de otras rutas que comienzan con / . La razón también es similar a /functions ruta. Si desea usar otra ruta de ruta como /functions-detail o /functions/open-door que incluye /functions en ella, entonces debe usar exact para la ruta /functions .

Answer 3

Las respuestas son geniales. Sin embargo, uno puede tener una duda como "¿Por qué no podemos tener exact para todas las rutas entonces?" Imagine una URL que sea algo como esto. https://yourreactwebsite.com/getUsers/userId= ? 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 accesorio exact en su enrutador aquí.