Nested Routing

React Router: Declarative Routing for React

React Router로 중첩 라우팅 하기

 

 

기본적인 Routes는 다음과 같이 활용한다. Router 내부에 여러 개의 Route를 둔다.

* react-router-dom의 모든 컴포넌트는 Router 내부에 있을 때만 작동함을 잊지 말자

* Route의 대상이 되는 컴포넌트에는 location, history, match라는 props를 갖는다.

 

여기서 match props가 네스트 라우팅을 구현하는데 주로 사용되므로 기억해두자.

 

export default () => {
  return (
    <Router>
      <Route path="/" exact component={Prices} />
      <Route path="/exchanges" component={Exchanges} />
      <Route path="/coins" exact component={Coins} />
      <Route path="/coins/:id" component={CoinDetail} />
    </Router>
  );
};

 

 

반면 Nested Routing은 다음과 같다. 실행된 컴포넌트(/coins/btc-bitcoin) 내부에서 또 다른 컴포넌트(coins/btc-bitcoin/markets)을 실행하기 위한 코드를 작성해보았다. 쉽게 말해 Nested Routing은 Route 안에 Route가 존재하는 것이다. 보면 알겠지만, Nested Routing라고해서 특별한 메서드나 컴포넌트를 사용하는 것이 아니다.

 

export default () => {
  return (
    <Router>
      <Header />
      <Route path="/" exact component={Prices} />
      <Route path="/exchanges" component={Exchanges} />
      <Route path="/coins" exact component={Coins} />
      <Route path="/coins/:id" component={CoinDetail} />
    </Router>
  );
};

// CoinDetail 컴포넌트가 렌더하는 컴포넌트

export default ({ isLoading, detail, error, match }) =>
  isLoading ? (
    <Loader />
  ) : (
    <>
      <div>
        <Link to={`${match.url}/markets`}>
          <Button>MARKETS</Button>
        </Link>
        <Link to={`${match.url}/exchanges`}>
          <Button>EXCHANGES</Button>
        </Link>
      </div>
      <Route path={`${match.path}/markets`} component={CoinMarket}></Route>
      <Route path={`${match.path}/exchanges`} component={CoinExchange}></Route>
    </>
  );

 

해당 컴포넌트는 CoinDetail 내부에서 움직이는 Route 이다. 실제 작동 방식은 다음과 같다.