리액트 라우터

https://www.daleseo.com/react-router-basic/

https://www.daleseo.com/react-router-authentication/

첫번째는 라우터 설명이고

두번째는 인증기능 구현 설명임

일단 원본부터 첨부함

리액트 라우터 컴포넌트는 3가지가 핵심이다

• Link컴포넌트

• html의 a태그와 비슷한 역할을 함
• to 속성에 url을 넣어줌
• 네비게이션 등을 구현할때 많이 사용

*Route포넌트

• 주소창의 경로와 매칭시킬 컴포넌트를 지정
• path에 경로를 적고 component에 컴포넌트 이름을 넣음

*Router컴포넌트

• 위의 link와 route를 묶어주는 역할
• 따라서 항상 link와 route의 상위 컴포넌트로 사용됨

이런식,,?

<Router>
  ...
  <Link />
  <Link />
  ...
  <Router />
  <Router />
  ...
</Router>

실 사용 예제는 링크를 참고해서 보기 바람.

추가로 404에러 페이지를 띄우는것도 항상 고려해야하는데

리액트 라우터에서 쉽게 구현할 수 잇따.

404에서 알아야되는 컴포넌트가 추가로 있는데 바로 switch이다.

switch는 위에서부터 차례대로 내려오면서 처음 맵핑되는 path의 컴포넌트로 이동한다.

이 특성을 이용하여 등록된 path가 아닌 나머지 path는 404에러 페이지를 타도록 하면 된다.

<main>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route component={NotFound} />
  </Switch>
</main>

이제 라우터를 확장하여 인증기능이랑 연동시켜야 하는데 드럽게 어렵다..