[ReactJS] React Router Dom

 

리액트에서는 페이지간의 이동을 할때 React Router Dom이라는 것을 사용합니다.

https://v5.reactrouter.com/web/guides/quick-start

Declarative routing for React apps at any scale | React Router

위의 사이트로 가보면

 

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를 직접 넣어준다면 각 컴포넌트간 이동도 가능합니다!