[React] 리액트로 페이지 나누기 (React-Router-Dom)

1. 설명 

React는 SPA(Single Page Application)이다.

 

따라서 리액트로 페이지를 나누는 순서는

• 컴포넌트를 생성하여 상세페이지 내용을 작성한다.
• 해당 페이지에 접속 시도시 기존페이지를 지우고 그 컴포넌트를 보여준다.

이 과정을  React Router Dom을 사용하면 간단하게 작성가능하다. 

=> React Router Dom : 화면 전환을 지원하는 모듈 

 

html의 경우 다른페이지를 작성하여 그 페이지(html)로 이동시키지만

React Router Dom을 쓰면 router로 웹사이트의 페이지를 구분할 수 있다. 

( react-router : 내부를 완전히 교체해 다른 페이지를 보여주는 것 ) 

 

2. 설치 

1. 터미널에 설치 명령어 입력

 

npm i react-router-dom

 

 

2. import 시키기

//사용할 기능을 { } 안에 넣기 
import { Routes, Route, Link} from 'react-router-dom';
import './App.css';
import SubPage from'./router/SubPage.js';

function App() {
  return (
    <div>
      <p> 안녕하세요 메인페이지 입니다. </p>
      <Routes>
        <Route Path='/SubPage' element={<><SubPage/></>}></Route>
      </Routes>
   </div>
  );
}

export default App;

 

이동할 페이지를 Routers 안에 넣고, path에 이동할 경로를 명시, element에는 보여줄 컴포넌트를 입력한다. 

 

예시에서는 따로 SubPage.js를 router 폴더 안에 작성했다. 

      <Routes>
        <Route Path='/SubPage' element={<><SubPage/></>}></Route>
      </Routes>

 

 

3. Routes 작성 (메인페이지)

 

//사용할 기능을 { } 안에 넣기 
import { Routes, Route, Link} from 'react-router-dom';
import './App.css';
import SubPage from'./router/SubPage.js';

function App() {
  return (
    
    <div>
      <p> 메인페이지입니다.</p>
       <Routes>
        <Route path='/SubPage' element={<SubPage/>}></Route>
      </Routes>
   </div>
  );
}

export default App;

 

 

4. 서브페이지 작성

function SubPage() {
    return (
      <div>
        <p> 안녕하세요 서브페이지 입니다. </p>
     </div>
    );
  }
  export default SubPage;

 

5. 확인 

• 로컬 호스트 주소 뒤에 /SubPage 입력 후 접속

 

6. 기타 

• path = ' / ' 로 입력하면 메인페이지라는 의미이다. 
• path = ' * ' 로 입력하면 정의한 페이지 외 모든페이지라는 의미로 오류페이지 등에 응용가능하다.
• Nested 문법을 통해 서브페이지의 하위페이지를 명시도 가능하다. 
• url 입력이 아닌 링크를 통해 접속 시키고 싶다면 <Link>를 사용하면된다.

{/* 1. 메인페이지 ('/') */}
<Route path="/" element={<>메인페이지입니다.</>}/>


{/* 2. 현재 생성한 라우트 페이지 외 모든것('*') */}
<Route path="*" element={<>오류페이지입니다.</>}/>

 
{/* 3.(Nested Routes) */}
{/* 단 두개를 동시에 보여주기때문에 멤버페이지를 어디에 보여줄지 other에정의해야한다. */}
<Route path="/other" element={<other/>}>
  <Route path="member" element={<div>멤버입니다.</div>}/>
  <Route path="location" element={<div>현재위치입니다.</div>}/>
</Route>


{/* 4.(Link) */}
{/* 단 두개를 동시에 보여주기때문에 멤버페이지를 어디에 보여줄지 other에정의해야한다. */}
<Link to="/"> home <Link>
<Link to="/SubPage"> Sub <Link>