React- 서브라우트

※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

서브라우트

서브 라우트는 라우트 내부에 라우트를 만드는것을 의미 한다.

방법은 컴포넌트를 만들어서 그 안에 또 Route 컴포넌트를 렌더링하면 된다.

 

Profiles 라는 컴포넌트를 만들어서 그 안에 각 유저들의 프로필 링크들과 프로필 라우트를 함께 렌더링해보겠다.

 

src/Profiles.js

import React from 'react';
import { Link, Route } from 'react-router-dom';
import Profile from './Profile';

const Profiles = () => {
  return (
    <div>
      <h3>유저 목록:</h3>
      <ul>
        <li>
          <Link to="/profiles/kim">kim</Link>
        </li>
        <li>
          <Link to="/profiles/gildong">gildong</Link>
        </li>
      </ul>

      <Route
        path="/profiles"
        exact
        render={() => <div>유저를 선택해주세요.</div>}
      />
      <Route path="/profiles/:username" component={Profile} />
    </div>
  );
};

export default Profiles;

위 코드에서 첫번째 Route 컴포넌트에서는 component 대신에 render 가 사용되었는데 여기서는 컴포넌트가 아니라, JSX 자체를 렌더링 할 수 있다. JSX 를 렌더링하는 것이기에 상위 영역에서 props 나 기타 값들을 필요하면 전달 해 줄 수있다.

 

그 다음, App 에서 Profiles 를 위한 링크와 라우트를 생성해주겠다. (기존 Profiles 라우트는 제거)

 

src/App.js

import React from 'react';
import { Route, Link } from 'react-router-dom';
import About from './About';
import Home from './Home';
import Profiles from './Profiles';

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
        <li>
          <Link to="/profiles">프로필 목록</Link>
        </li>
      </ul>
      <hr />
      <Route path="/" exact={true} component={Home} />
      <Route path="/about" component={About} />
      <Route path="/profiles" component={Profiles} />
    </div>
  );
};

export default App;

 

실행 결과