-
React Router (ver. 6 이상)React 2023. 3. 19. 21:35
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 로 이동한 모습
'React' 카테고리의 다른 글
React Router ( parameters ) (0) 2023.03.20 useEffect (0) 2023.03.19 OPEN API 데이터 불러오기 ( fetch ) (0) 2023.03.19 nomad) react .map( ) (0) 2023.03.17 nomad) react useState( [] ) 활용 (0) 2023.03.17