react 페이지 이동하기 react-router-dom사용

Django를 사용할 때는 url로 값을 넘겨서 해줬는데 뭔가 react랑 비슷한 느낌이다. 한번 따라 해 보도록 하자.

일단

react-router-dom을 package.json에 설치해주자.

yarn add react-router-dom

npm install react-router-dom

둘 중에 사용하고 있는 패키지 툴을 사용하면 된다.

 

Header.js의 파일을 살펴보자.

../components/Header.js

import React from 'react';
import './css/Header.css';
import Logo from '../Logo.jpeg';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
const Header = () => (
    <div className="header">
        <div className="title">
    <a href="https://applepick.tistory.com/" target="_blank">
    <img className="logo" src={Logo} />
    </a>
    <span>Apple's pick</span>
    </div>
        <div className="buttons">
          <button><Link to= '/' className="links">Home</Link></button>
          <button><Link to= '/Signpage' className="links">회원가입</Link></button>
          <button><Link to= '/Login' className="links">로그인</Link></button>
        </div>
    </div>
    
);

export default Header;

필자는 Router 파일을 따로 만들어 구성해주고 있어 여기서는 url만 설정해주었다. 저위에 Router, Route, Switch는 선언 안 해도 된다. 여기서는 안 쓰니... 혹시 나중에 사용할 수도 있어 선언만 해놓았다.

이제 Router.js  파일을 보자.

 ../components/Router.js
 
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Accountpage from './Accountpage';
import Main from '../components/Main';
import Header from '../components/Header';
import Login from '../components/login';

export default () => (
    <Router>
    <Header/>{/* 라우터 관리 */}
    <Route exact path='/' component={Main}/>
    <Route path='/Signpage' component={Accountpage}/>
    <Route path='/Login' component={Login}/>
    </Router>
    )

여기는 라우터를 따로 관리해주었다. Django에서 구조를 보면 url.py 같은 느낌??? 아무튼 각자 파일을 import를 다해준다. 그리고 라우터 설정을 해주면 된다. 저기서 Header를 넣어준 이유는 Header에서 사용할 것이기 때문에 Header가 라우터 안에 들어있어야 한다. 그냥 한파일로 설정해주면 되는데 나중에 url이 많아지면 복잡할 것 같아 따로 구축해 놓았다. 

마지막으로 App.js파일을 보자면

import React,{Component} from 'react';
import Routers from './components/Router'; 
class App extends Component {
  render() {
      return (
        <>
        <Routers/>
        </>
      );
  }
}


export default App;

여기서 라우터를 선언하여 불러오게 했다. 라우터에서 Header를 선언해줬으니 상단바가 출력될 것이다. 그래서 만약 버튼을 누른다면 상단바에서 바뀌는 게 아니라 하단에 렌더링 하게 될 것이다.

 

위에 상단바를 누르면 잘 넘어간다. 끝!