참고사이트들
https://react.vlpt.us/react-router/01-concepts.html
https://reactrouter.com/en/main/start/tutorial
npm install react-router-dom 로 설치
index.js에 import {BrowserRouter} from 'react-router-dom'; 추가
src 안에 page 폴더 생성하고 안에 Home.jsx와 About.jsx 생성
App.js에 import {Routes} from 'react-router-dom';추가
div 대신 routes로 교체[div 안에 사용해도 상관없음]
위 import 안에 routes,route로 하나 더 추가
<Route path='주소' element={<컴포넌트 이름/>}/> 추가
주소에 / 만 있으면 첫 화면에 보이는 주소
<Route path='/' element{<Home/>}/>와
<Route path='/about/ element={<About/>}/>를 추가한 경우
localhost:3000 에서는 Home 컴포넌트가 보이고 localhost:3000/about를 입력하면 About 컴포넌트가 보인다.
일일히 주소창에 입력하기는 초반에는 귀찮고 많아지면 힘들기 때문에 Link 컴포넌트를 사용하기
<Link to="주소">내용</Link>
입력하기 전에 import {Link} from "react-router-dom";도 추가-html에서 쓰던 link와 전혀 다른 router-dom 에서 존재하는 Link 라는 메서드를 써야 하기 때문
to의 작성된 주소는 App.js에서 작성 path 주소와 동일[주의할 부분 : 주소를 비우면 자기 자신으로 간다]
https://velog.io/@velopert/react-router-v6-tutorial
URL 파라미터 : 주소의 경로에 유동적인 값을 넣는다. 예를 들어 블로그의 특정 메뉴나 목록을 클릭했을 때 [/profile/velopert]
쿼리스트링 : 주소의 뒷부분에 ? 문자열 이후 key=value로 값을 정의하며 &로 구분. 키워드 검색,페이지네이션,정렬 방식 같은 데이터 조회에 필요한 옵션 [/articles?**page=1&keyword=react]
URL 파라미터를 이용한 값 전달
path의 주소의 값이 들어갈 공간에 이름 작성[/st/:value]
해당 컴포넌트에서는 import {useParams} from "react-router-dom";추가
return 위에 let {변수이름}=useParams();로 들고 올 수 있다. 위에서 value라고 썼기 때문에 변수이름은 value 여야 한다. 또는 {} 없이 useParams();를 들고 올 수 있다. 대신 안의 값을 써야 할 때에는 .쓰인이름 을 붙여야 들고 올 수 있다.
path=’*’ : path로 지정하지 않은 나머지 내용 모두를 뜻함