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

이 예에서는 실제로 아무것도 없습니다. 이 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>

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

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

</Switch>

**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>