반응형
SMALL
6.2 Building the Navigation
목표 : 네비게이션 (버튼) 만들기
<App.js>
할 일import Navigation from "./components/Navigation";
추가
function App 안에
<Navigation />
추가<Navigation.js>
import React from "react";
function Navigation(){
return <div>
<a href="/">Home</a>
<a href="/about">About</a>
</div>
}
// href는 HTML로 페이지를 새로고침시킴
// Home 과 About을 눌러보면 페이지가 새로고침됨
// 리액트가 죽고 새 페이지가 새로고침
export default Navigation;
- link를 사용해야함
- 페이지 새로고침 대신 About과 Home페이지 들어가짐
- Link를 사용할 경우, Link는 라우터 안에 있어야함
import React from "react";
import {Link} from "react-router-dom";
function Navigation(){
return <div>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</div>
}
export default Navigation;
반응형
LIST
'Web 강의 > ReactJS로 영화 웹 서비스 만들기' 카테고리의 다른 글
[노마드코더/ReactJS로 영화 웹 서비스 만들기]6.4 Redirecting (0) | 2022.03.23 |
---|---|
[노마드코더/ReactJS로 영화 웹 서비스 만들기]6.3 Sharing Props Between Routes (0) | 2022.03.23 |
[노마드코더/ReactJS로 영화 웹 서비스 만들기]6.0 Getting Ready for the Router (0) | 2022.03.23 |
[노마드코더/ReactJS로 영화 웹 서비스 만들기]6.1 Building the Router (0) | 2022.03.23 |
[노마드코더/ReactJS로 영화 웹 서비스 만들기]5.0 Deploying to Github Pages & 5.1 Are we done? (0) | 2022.03.23 |