[React] 쇼핑몰 프로젝트 (3) - Router 활용

 

축구선수 사진을 클릭했을 때 해당 축구선수의 상세내용을 보여주는 페이지를 띄워주고 싶다.

 

배운 내용을 바탕으로

구현해보자.

 

 

기존 자바스크립트에선 URL을 입력하면 그 주소에 해당하는 HTML파일을 띄워주기만 하면 됐다.

 

하지만 리액트는 index.html 파일 단 한개만을 쓰기 때문에

app.js파일 내에서 route를 사용한다.

 

자세히 살펴보자

 

 

route를 사용하기 위해서는

 

npm install react-router-dom@6

 

터미널에서 npm install react-route-dom@6 를 입력후 설

치해준다.

 

다음 index.js 파일 상단에

import { BrowserRouter } from 'react-router-dom';

 

이 코드를 import해주고

 

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>
);

 

<App />을

<BrowserRouter>태그로 감싸준다

 

 

App.js파일로 돌아와

import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom';

 

상단에 이 코드를

입력하면 Route를 사용할 셋팅환경은 끝났다.

 

function App(){
  return (
    <Routes>
        <Route path="/detail/0" element={<div> 0번째 선수 상세페이지 </div>}/>
    </Routes>
  )
}

 

 

Routes태그 안에

Route태그를 넣고 클라이언트가 입력했을때 이동해줄 URL페이지를 path=""로 넣어준다.

 

element={}안엔 해당 페이지로 접속했을 때 보여줄 HTML태그들을 작성한다.

 

위 태그는

http://localhost:3000/detail/0으로 접속한다면

아무것도 없는 백지화면

상단에

'0번째 선수 상세페이지'라는 문구만 뜰것이다.

 

 

 

이번 포스팅 내용을 바탕으로

다음 글에서는

실제 만들고싶은 기능을 넣어보자.