React Router (ver. 6 이상)

React Router (ver. 6 이상)

create-react-app 명령이 실행된 경로에서

npm install react-router-dom

버전을 지정해서 받고싶다면
npm install react-router-dom@버전

 - package.json 돌더 내부에 react-fouter-dom 요소가 추가되어있다 ( ^6.9.0 ) 버전

 

 

 - 리액트 라우터는 flask에서 URL/keyword 를 설정해서 홈 페이지의 스크린(구획)을 이동하는 것 처럼

홈페이지를 주제에 맞게 나눌 수 있는 기능이다.

 

 - 리액트에서는 각각의 페이지를 라우터라고 한다.

 

리액트의 경우 components와 routes 폴더를 생성해서 필요한 요소들을 저장해두고 사용할 수 있다.

 

---

index.js

 - index.js 는 App을 불러오기만 하면 된다.

 

---

App.js

 - App의 경우 react-router-dom 으로부터 여러가지 기능들을 import 해오고,

기능들을 이용해서 라우터를 생성한 다음 return으로 보내줘야한다.

import{BrowserRouter , Route , Routes , Link} from "react-router-dom";
-> BrowserRouter , Route , Routes 이 3가지 태그들은 라우터를 활용하는데 가장 기본적인 요소다
-> Link는 a 태그와 비슷하지만 조금 다르다.
Link 태그는 렌더링된 컴포넌트의 state가 유지되어 SPA로 동작한다.
a 태그는 컴포넌트들이 제거되고 state가 초기화되서 정보를 제대로 표시할 수 없다.


function App(){
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">HOME</Link>
        <Link to="/detail">Detail</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />}/>
        <Route path="/detail" element={<Detail/>}/>
      </Routes>
      <footer>footer 입니다.</footer>
    </BrowserRouter>
  );
}

-> 기본적으로 BrowserRouter 내부에 Routes를 생성하고 Route를 생성해서 페이지를 만든다
Route는 여러개가 들어가도 상관없다.

Route 태그
<Route path="/something" element={<Home />}/>

Link 태그
<Link to="/something">Text</Link>

그냥 / 만 있다면, Home 페이지로 돌아간다.

** BrouwserRouter 내부에 nav나 footer 같은 요소들을 넣을 수 있는데,
이 때의 nav 와 footer는 route를 통해 다른 페이지로 넘어가더라도 유지되는 특징이 있다.

---

Detail.js

 : Home.js 에는 별 다른 기능을 넣지 않아서 import할 요소가 필요 없지만,

Detail.js에는 onClick 이벤트로 useNavigate 기능을 넣었다.

 - useNavigate 를 활용해서 특정 주소로 이동할 수 있다.

import { useNavigate } from "react-router-dom";


  let navigate = useNavigate();
  <button onClick={() => {navigate("/")}}> Home </button>

 

---

웹 페이지 확인

 - Home.js 를 불러온 모습 , 상단의 nav는 Detail.js 로 이동해도 변함 없을 것이다.

 - Detail.js 로 이동한 모습