react-router-dom (화면 전환)

react-router-dom

 

https://reactrouter.com/web/api/Link/to-object

react-router : react의 화면 전환을 도와주는 역할

• 일반적인 웹에서는 <a href="\">을 이용해서 이동했다면
• react에서는 <Link to="\"> </Link>(링크 형식으로 나옵니다)을 이용해서 이동한다.

 

설명

 

• index.html의 id=root부분을 채워 넣기 위해 index.js로 App.js를 연결 해줍니다.
• App.js 에서 react-router-dom을 사용해서 홈페이지 이동이 잘 되게 해줍니다.
• Navigation.js는 react-router의 Link태그가 있는 부분입니다.

 

 

 

index.js

• index.html 의 id=root부분에 App.js가 실행 되게 해줍니다.

 

 

Navigation.js

• <Link to="\"> </Link> => \ 으로 이동하는 링크

 

 

App.js

• <Route path=" " component=" " /> : path로 가면 component를 보여준다.
  
  • 다 겹치는 현상이 일어난다. => if 순서대로 쓰는 느낌
  • <Route path="/" component={a} />
  • <Route path="/a" component={b} />
• exact={true} : 겹치는 현상을 막기 위함 => <Route ... /> 1개만 나오게 한다.

+

Link로 보낼 때 항상 props(data)가 같이 갑니다.

그래서 다음과 같이 사용하면 됩니다.