[react.js]react-router 사용방법

설치방법

yarn add react-router-dom

 

사용방법

우선 환경셋팅을 해줘야합니다.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'; //추가
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <BrowserRouter> //추가
    <App />
  </BrowserRouter>, //추가
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

셋팅은 이렇게 하고 이제 만들어야 할 페이지들을 만들어놓겠습니다.

pages/Index.js

import React from 'react';

const Index = () => {
  return <div>Index</div>;
};

export default Index;

 

pages/Param.js

import React from 'react';

const Param = () => {
  return <div>Param</div>;
};

export default Param;

 

pages/Query.js

import React from 'react';

const Query = () => {
  return <div>Querys</div>;
};

export default Query;

페이지들은 다 만들어줬으니, App.js에서 제어해보겠습니다.

 

App.js

import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom';
import Index from './pages/Index';
import Param from './pages/Param';
import Query from './pages/Query';

class App extends Component {
  render() {
    return (
      <div>
        {/* 링크 제어 */}
        <ul>
          <li>
            <Link to="/">Index</Link>
          </li>
          <li>
            <Link to="/param">Param</Link>
          </li>
          <li>
            <Link to="/query">Query</Link>
          </li>
        </ul>
        <div>
          <Route path="/" exact={true} component={Index} />
          {/* 다른곳에도 /가 있기 때문에 중복주소가 될 수 있지만 exact={true}를 통해
          간단히 해결됩니다. */}
          <Route path="/param" component={Param} />
          <Route path="/query" component={Query} />
        </div>
      </div>
    );
  }
}

export default App;

이렇게 해주고 Link로 이동되는지 살펴보세요.