반응 : 차이점

반응 : 차이점 과

---

누군가가 차이점을 설명 할 수 있습니다.

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

과

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

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

---

이 예에서는 실제로 아무것도 없습니다. exactPARAM은 비슷한 이름이 여러 경로가있을 때 활동하기 시작 :

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

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

이제 여기서 문제 http://app.com/users는 라우터 로 이동할 때 정의 된 모든 경로를 통과하여 찾은 FIRST 일치 항목을 반환합니다. 따라서이 경우 Users먼저 경로를 찾은 다음 반환합니다. 문제 없다.

그러나으로 http://app.com/users/create이동하면 다시 정의 된 모든 경로를 통과하여 찾은 FIRST 일치 항목을 반환합니다. React router는 부분 일치를 수행하므로 /users부분적으로 일치 /users/create하므로 Users경로를 다시 잘못 반환 합니다!

exactPARAM는 경로의 부분 매칭을 비활성화하고 확인 경로가있는 현재의 URL에 정확하게 일치하는 경우에만 경로를 반환합니다.

따라서이 경우, 우리는 추가해야 exact우리에게 Users그것은 단지에 일치하도록 경로 /users:

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

문서 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경로.

---

정확 : 부울

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

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

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

여기를보세요 : https://reacttraining.com/react-router/core/api/Route/exact-bool

참고 URL : https://stackoverflow.com/questions/49162311/react-difference-between-route-exact-path-and-route-path