본문 바로가기

React Switch from 'react-router-dom'

by mtoc 2019. 12. 31.

Switch는 어떤 일을 하는가

는 처음 매칭되는 하나의 루트만을 리턴한다.
exact는 정확하게 매칭되는 루트들의 개수를 리턴한다.

예를 들어:

<Switch>
    <Route exact path="/animals" component={Animals} />
    <Route path="/animals/fish" component={Fish} />
    <Route component={Missing} />
</Switch>
<Route path="/animals" component={Order} />

Missing 컴포넌트가 Switch 바깥에 있으면 단 하나의 루트만을 리턴한다.
exact와 함께 쓰이면 "/animals" 루트는 "/animals/fish"와 같이 "animals"를 포함하는 모든 루트를 잡아내지 않을 것이다.
exact 없이 쓰이면 "/animals/fish" 루트는 "animals/fish/cod", "animals/fish/salmon" 등과 같은 Fish 컴포넌트를 리턴할 것이다.
exact 없이 문 바깥에 있기 때문에 Order 컴포넌트는 "/animals"를 포함하는 모든 path를 렌더한다.

출처: stackoverflow(https://stackoverflow.com/questions/45122800/react-router-switch-behavior)

'' 카테고리의 다른 글

object.create과 function constructor pattern 차이  (0) 2020.05.06
npx create-react-app 이 작동하지 않을 때  (0) 2020.04.30
TypeScript 시작하기  (0) 2020.03.28
자바스트립트 this, DOM  (0) 2019.10.16
자바스크립트 작동 방법  (0) 2019.10.14

댓글