[react] 노마드코더 영화웹서비스 제작 6.2 Building the Navigation
네비게이션이 라우터와 관련된 처음 듣는 용어일 거라고 생각했는데, 네비게이션 바 얘기할 때 그 네비게이션이란 것을 깨달았다.
우리는 홈과 어바웃 두 개의 버튼만 만들어 줄 계획이다.
먼저 Navigation.js 를 새로 만들어주고
<a>Home</a>
과 <a>about</a>
를 리턴하는 함수형 컴포넌트를 만든다.
문제
<a>
태그 사용시 home을 클릭하면 아예 새로고침 되어버리는 상황이 발생한다. SPA에서 별로 바라지 않는 상황이다.
해결
그래서 link를 import하기로 했다.
import {Link} from "react-router-dom";
return(
<div>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</div>
);
🧭 네비게이션: 기억해야 할 두 가지
- 라우터 밖에서 Link 쓸 수 없음
- 그렇다고 모든 걸 라우터 안에 쓸 필요는 없음 = Link를 굳이 쓸 필요 없는 경우
ex) 푸터같이 아예 다른 페이지로 가는 경우에는 Router 밖에 써도 된다. 이럴 때는 라우터 밖에 Fragment<>...</>
를 한 번 씌워준다.
참고로 라우터는 해쉬라우터 외에 브라우저 라우터도 있는데, 이건 도메인에 #샵이 안 붙는다. 그런데 이번에 쓴 이유는, 브라우저 라우터가 gh-pages에 쓰기에 불편하기 때문이라고..
코드_최종
// ***Navigation.js*** import React from 'react'; import {Link} from 'react-router-dom'; function Navigation (){ return( <div className="routes"> <button className="Home route"> <Link to="/">Home</Link> </button> <button className="About route"> <Link to="/about">About</Link> </button> </div> ) } export default Navigation;
// ***App.js*** import React from 'react'; import {HashRouter, Route} from "react-router-dom"; import Home from "./routes/Home"; import About from "./routes/About"; import Navigation from "./components/Navigation"; function App(){ return( <HashRouter> <Navigation /> <Route path="/" exact={true} component={Home} /> <Route path="/about" component={About} /> </HashRouter> ) } export default App;
CSS
수업이 끝나고 따로 스타일링을 하면서 수정한 것들을 기록해보려 한다.
을 App.js에 넣었기 때문에 로딩중에도 홈/어바웃 버튼이 보이고, 다들 배경을 담당하는 div의 크기가 다른 것인지 가운데 정렬한 홈/어바웃 버튼이 가로로 조금 움직여서 앱에서는 을 제거하고 Home.js({isLoading?(‥):(<div>‥<Navigation />)}
)와 About.js에 각각 넣어주었더니 보기 좋아졌다.
- Link는 html에서 a태그로 들어오기 때문에 a태그를 이용해 선택하면 되겠다.
여기까지 완료 했다.
Author And Source
이 문제에 관하여([react] 노마드코더 영화웹서비스 제작 6.2 Building the Navigation), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@unu/react-노마드코더-영화웹서비스-제작-6.2-Building-the-Navigation저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)