subRoute?

라우트 안에 들어있는 또 다른 Route
사용법은 Route로 사용한 component안에서 Route를 또 쓰면 됨

이번 편은 velopert님 영상 참고 => 패스트 캠퍼스에서 수강가능

Profile.js파일을 만들고 다음과 같이 설정

import React from 'react';

const profileData = {
  velopert: {
    name: '김민준',
    description: 'Frontend Enginner @ RIDI',
  },
  homer: {
    name: '심슨',
    description: '심슨 가족에 나오는 아빠 역할 캐릭터',
  },
};
function Profile({ match }) {
  const { username } = match.params;
  const profile = profileData[username];

  if (!profile) {
    return <div>존재하지 않는 사용자입니다.</div>;
  }

  return (
    <div>
      <h3>
        {username} ({profile.name})
      </h3>
      <p>{profile.description}</p>
    </div>
  );
}

export default Profile;

지난 시간에 썼던 파라미터도 그대로 match.params를 통해 {username}에 불러왔고, profileData라는 객체에 파라미터 값을 넣어줘서 해당 객체를 불러오게 끔 함

완료되었으면 Profiles.js를 생성

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

function Profiles() {
  return (
    <div>
      <h3>사용자 목록</h3>
      <ul>
        <li>
          <Link to="/profiles/velopert">Velopert</Link>
        </li>
        <li>
          <Link to="/profiles/homer">homer</Link>
        </li>
      </ul>

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

export default Profiles;

url을 그냥 /profiles로 들어갈 경우는

      <Route
        path="/profiles"
        exact
        render={() => <div>사용자를 선택해주세요</div>}
      />

이부분이 출력됨
여기서 render는 바로 쓸 수 있는 함수를 의미
즉, 어떤 component를 불러오는게 아니라, render에 적힌 함수가 대신 실행됨

<Route path="/profiles/:username" component={Profile} />

이부분을 통해, Profile.js에게 username이란 파라미터를 전달할 수 있음
그럼 Profile.js는 이 파라미터를 전달 받았으니

  return (
    <div>
      <h3>
        {username} ({profile.name})
      </h3>
      <p>{profile.description}</p>
    </div>
  );

화면을 통해 이 부분을 출력해줌

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

function 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 />
      <Route path="/about" component={About} />
      <Route path="/profiles" component={Profiles} />
    </div>
  );
}

export default App;

App.js를 다음과 같이 해주고 실행하면 아주 잘 동작함