Reagir: diferença entre <caminho exato da rota = "/" /> e <caminho da rota = "/" />

Alguém pode explicar a diferença entre

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

e

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

Eu não sei o significado de 'exato'

Neste exemplo, nada realmente. O exactparâmetro entra em ação quando você tem vários caminhos com nomes semelhantes:

Por exemplo, imagine que tivéssemos um Userscomponente que exibisse uma lista de usuários. Também temos um CreateUsercomponente usado para criar usuários. O URL para CreateUsersdeve ser aninhado em Users. Portanto, nossa configuração pode ser algo assim:

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

Agora, o problema aqui, quando formos ao http://app.com/usersroteador, percorrerá todas as nossas rotas definidas e retornará a PRIMEIRA correspondência que encontrar. Portanto, nesse caso, ele encontraria a Usersrota primeiro e depois a retornaria. Tudo bom.

Mas, se formos http://app.com/users/create, ele percorrerá novamente todas as rotas definidas e retornará a PRIMEIRA correspondência encontrada. O roteador React faz uma correspondência parcial, correspondendo /usersparcialmente /users/create, para que retornasse incorretamente a Usersrota novamente!

O exactparâmetro desativa a correspondência parcial para uma rota e garante que ela só retorne a rota se o caminho for uma correspondência EXATA para o URL atual.

Portanto, neste caso, devemos adicionar exactà nossa Usersrota para que ela corresponda apenas em /users:

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

Os documentos explicam exactem detalhes e dão outros exemplos.

Em resumo, se você tiver várias rotas definidas para o roteamento do seu aplicativo, inclua um 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>

Então você deve colocar a exactpalavra-chave na Rota, cujo caminho também é incluído no caminho de outra Rota. Por exemplo, o caminho inicial /é incluído em todos os caminhos, portanto, é necessário ter uma exactpalavra-chave para diferenciá-lo de outros caminhos que começam com /. O motivo também é semelhante ao /functionscaminho. Se você quiser usar outro caminho de rota como /functions-detailou /functions/open-doorque inclua /functionsnele, será necessário usá-lo exactpara a /functionsrota.

Dê uma olhada aqui: https://reacttraining.com/react-router/core/api/Route/exact-bool

exato: bool

Quando verdadeiro, corresponderá apenas se o caminho corresponder location.pathnameexatamente.

**path**    **location.pathname**   **exact**   **matches?**

/one        /one/two                true        no
/one        /one/two                false       yes

A resposta mais curta é

Por favor, tente isso.

<switch>
   <Route exact path="/" component={Home} />
   <Route path="/about" component={About} />
   <Route path="/shop" component={Shop} />
 </switch>