[React] 서브 라우트

• 라우트 내부에 또 라우트를 정의하는 것

[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/velopert'>velopert</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라는 props를 넣너 주었다.

- 컴포넌트 자체를 전달하는 것이 아니라, 보여주고 싶은 JSX를 넣어 줄 수 있따.

- 지금처럼 따로 컴포넌트를 만들기 애매한 상황에 사용해도 되고, 컴포넌트에 props를 별도로 넣어 주고 싶을 때도 사용할 수 있다.

- exact라고만 적어주었는데 이는 exact={true}와 같은 의미

 

 

[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='/' component={Home} exact={true}/>
      <Route path={['/about', '/info']} component={About}/>
      <Route path='/profiles' component={Profiles}/>
    </div>
  );
};

export default App

- Profiles 컴포넌트를 /Profiles경로에 연결시킨다.

- 해당 경로로 이동하는 링크도 추가

 

 

[결과]