반응 : <Route exact path =“/”/>와 <Route path =“/”/>의 차이점

누군가가 차이점을 설명 할 수 있습니까?

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

과

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

나는 '정확한'의 의미를 모른다

이 예에서는 실제로 아무것도 없습니다. 이 exact이름은 비슷한 이름을 가진 여러 경로가있을 때 작동합니다.

예를 들어 Users사용자 목록을 표시하는 구성 요소가 있다고 가정합니다. 또한 CreateUser사용자를 만드는 데 사용되는 구성 요소가 있습니다. 의 URL은 CreateUsers아래에 중첩되어야합니다 Users. 따라서 설정은 다음과 같습니다.

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

이제 우리가 http://app.com/users라우터 로 갈 때 문제 는 정의 된 모든 경로를 통과하고 찾은 첫 번째 일치 항목을 반환합니다. 따라서이 경우 Users경로를 먼저 찾은 다음 반환합니다. 문제 없다.

그러나에 http://app.com/users/create가면 정의 된 모든 경로를 다시 통과하고 찾은 첫 번째 경기를 반환합니다. 반응 라우터는 부분 일치를 수행하므로 /users부분적으로 일치 /users/create하므로 Users경로를 다시 잘못 반환 합니다!

이 exact매개 변수는 경로에 대한 부분 일치를 비활성화하고 경로가 현재 URL과 정확히 일치하는 경우에만 경로를 반환하도록합니다.

따라서이 경우 경로에만 추가 exact하여 Users경로 만 일치하도록해야합니다 /users.

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

문서 exact는 자세하게 설명하고 다른 예를 제공합니다.

즉, 앱의 라우팅에 대해 여러 개의 경로가 정의되어 있고 Switch이와 같은 구성 요소로 묶인 경우

<Switch>

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

  <Route exact path="/functions" component={Functions} />
  <Route path="/functions/:functionName" component={FunctionDetails} />

</Switch>

그런 다음 exact경로가 다른 경로의 경로에 포함 된 경로 에 키워드 를 입력해야 합니다. 예를 들어, 홈 경로 /는 모든 경로에 포함되므로 exact로 시작하는 다른 경로와 구별하려면 키워드가 있어야 합니다 /. 그 이유는 또한 /functions경로 와 유사 합니다. 다른 경로 경로 를 포함 /functions-detail하거나 경로 경로 /functions/open-door를 포함 하려면 경로 /functions에 사용해야 합니다.exact/functions

여기를보십시오 : https://reacttraining.com/react-router/core/api/Route/exact-bool

정확한 : bool

true 인 경우 경로가 location.pathname정확히 일치하는 경우에만 일치합니다 .

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

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

가장 짧은 대답은

이것을 시도하십시오.

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