실습문제 4. Router

1) 라우팅 실습문제

• main.tsx에서 App.tsx가 아닌 Practice.tsx가 렌더링 되도록 설정 후 진행하세요.

• Practice.tsx에 라우트를 추가하고, 여태까지 진행한 실습문제들이 렌더링 되도록 처리하세요

• 단, 라우트 설정시 중첩 라우팅을 이용하세요

  • 라우트경로 : 실습문제 1번 url -> /practice/1

  • 라우트경로 : 실습문제 2번 url -> /practice/2

• 단, 실습문제 6번 axios실습문제의 경우 추가로 동적 라우트로 설정하여, 검색에 필요한 id값을 전달할 수 있도록 만드세요.

  • ex) /practice/6/id/1 -> axios 실습문제 렌더링 후 1번 포켓몬 검색

  • ex) /practice/6 -> axios 실습문제 렌더링.

• Practice.tsx의 좌측 내비바에는 버튼 클릭시 지정한 실습문제로 이동할 수있도록 설정하세요.

function Practice() {

  return (
    <>
    <div className='App'>
      <div className='header'>
          <h1 style={{ fontWeight: "bolder" }}>KH G CLASS</h1>
      </div>
      <div>
        {/* 라우트 설정  */}     
        <Routes>
          <Route path="/" element={<div className='title'>Home</div>} />
        </Routes>
          <nav className='nav'>
          <li>
            {/* Link 컴포넌트를 사용하여 라우팅 설정 */}
            <Link to="/">메인페이지</Link>
          </li>
          <li>            
            <Link>실습1</Link>
          </li>
          <li>            
            <Link>실습2</Link>
          </li>
          <li>            
            <Link>실습3</Link>
          </li>
          <li>            
            <Link>실습4</Link>
          </li>
          <li>            
            <Link>실습5</Link>
          </li>
          <li>            
            <Link>실습6</Link>
          </li>
        </nav>
          
      </div>
    </div>
    </>
  )
}