react는 컴포넌트 라이브러리일 뿐이므로, router기능을 가지고 있지 않습니다. 그래서 대표적으로 사용하는 router관련 라이브러리로 react-router-dom이 있습니다.

react-router-dom 공식홈페이지

원리

app 컴포넌트를 감싸서 props로 관련된 내용을 넘겨받아 사용합니다.

router

어떤 방식으로 세팅할 건지를 정합니다. 브라우저 방식이냐 hash방식이냐 등등

route

경로를 설정해줍니다.

• Switch: route path가 일치하는 가장 첫 번째 것을 렌더링해 줌. 따라서 route가 exact되어 있지 않으면 원하지 않은 경로의 것이 보여질 수 있습니다.

route props

사용되는 props들은 아래 내용들입니다.

• match: route path 일치한 내용들에 관한 정보
• location: 현재 내가 있는 위치에 대한 정보
• history: history api내용들을 담아놓음. method도 몇 개 있음.

Link

해당 url로 이동시켜 주는 트리거 입니다.

<Link to='/homepage'>homepage</Link>
<Link to=`${props.match.url}/19`>19번째 카테고리</Link>

setting

index.js

props로 값을 받을 수 있도록 app을 감싸줍니다.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";

import App from './App';

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

app.js

route 설정을 해줍니다.

import { Switch, Route } from 'react-router-dom';

import './App.css';
import HomePage from "./pages/homepage/homepage.component";

const hatsPage = (props) => {
  return (
    <div>
      <h1>HATS PAGE</h1>
    </div>
  );

};

function App() {
  return (
    <div>
      <Switch>
        <Route exact path='/' component={HomePage} />
        <Route exact path='/hats' component={hatsPage} />
      </Switch>
    </div>
  );
}

withRouter

route 설정이 되어 있지 않은 컴포넌트의 routing이 필요할 때 사용 가능합니다. withRouter를 HOC로 감싸면 똑같이 route props를 사용할 수 있습니다.

import { withRouter } from 'react-router-dom';

import './menu-item.styles.scss';

const MenuItem = ({title, imageUrl, size, history, linkUrl, match}) => (
    <div className={`${size} menu-item`} onClick={() => history.push(`${match.url}${linkUrl}`)}>
      <div className="background-image" style={{
        backgroundImage: `url(${imageUrl})`
      }} />
      <div className="content">
        <h1 className="title">{title.toUpperCase()}</h1>
        <p className="subtitle">SHOP NOW</p>
      </div>
    </div>
);

export default withRouter(MenuItem);