728x90
리액트에서는 페이지간의 이동을 할때 React Router Dom이라는 것을 사용합니다.
https://v5.reactrouter.com/web/guides/quick-start
위의 사이트로 가보면
Basic에서 오른쪽의 파란색 하이퍼링크를 클릭하면 URL도 바뀌고 누르는것마다 내용도 바뀌게 되는데요.
이러한 것들을 react-router-dom을 사용하여 합니다.
코드를 보게되면 Router안에 스위치가 있는데요.
스위치에서 사용할 컴포넌트를 정해주고 Route를 결정해주는 것을 볼 수 있습니다.
이와 같이 만들기 위해서 우선 react-router-dom을 설치하겠습니다.
npm install react-router-dom@5.1.2 --save
(경로주의)
너무 최신버전으로 다운받으면 에러가 나서 5.1.2버전으로 다운받았습니다.
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
} from "react-router-dom";
import LandingPage from './components/views/LandingPage/LandingPage';
import RegisterPage from './components/views/RegisterPage/RegisterPage';
import LoginPage from './components/views/LoginPage/LoginPage';
import NavBar from './components/views/NavBar/NavBar';
import Footer from './components/views/Footer/Footer';
function App() {
return (
<Router>
<div>
<Switch>
<Route exact path="/">
<LandingPage />
</Route>
<Route exact path="/RegisterPage" component={RegisterPage} />
<Route exact path="/LoginPage" component={LoginPage} />
<Route exact path="/NavBar" component={NavBar} />
<Route exact path="/Footer" component={Footer} />
</Switch>
</div>
</Router>
);
}
export default App;
react-router-dom이 설치가 되었다면 위의 사이트의 코드를 이용하여 이렇게 코드를 작성해 보겠습니다.
Route부분에 end태그이전에 <LandingPage /> 를 작성해도 되지만 Route 태그 자체에 component속성으로 넣어주어도 같은 역할을 하게 됩니다.
코드가 훨씬 깔끔해지죠!
npm run start로 실행시켜볼까요??
작동이 잘되네요!
URL에 path를 직접 넣어준다면 각 컴포넌트간 이동도 가능합니다!
728x90
'따라하며 배우는 시리즈 > NodeJS & ReactJS Basic' 카테고리의 다른 글
[ReactJS] CORS이슈 해결을 위한 Proxy 설정 (0) | 2022.09.13 |
---|---|
[ReactJS] 데이터 흐름과 Axios사용하여 요청보내기 (0) | 2022.09.12 |
[ReactJS] CRA to Our Boilerplate(해당 프로젝트에서 디렉터리 구조) (0) | 2022.09.10 |
[ReactJS] Create React App(리액트 개발환경 설정) (0) | 2022.09.09 |
[NodeJS] 노드 리액트 기초 - 로그아웃 기능 만들기 (0) | 2022.09.08 |