Router(라우터) 기능
- npm install react-router-dom 설치. 확인은 package.json에서
- index.js에서 <App/>을 <BrowserRouter></BrowserRouter>로 감싸기. 이 때
import {BrowserRouter} from 'react-router-dom';추가 - App.js에서 div를 Routes로 바꾸거나 div 안에 Routes 추가
Routes 안에서<Route path="주소" element={<컴포넌트이름/>}/>으로 쓴다.
위 2개도 react-router-dom에 있는 함수이므로
import {Routes,Route} from 'react-router-dom';추가
주소에 “*”를 넣었다면 path로 따로 지정한 주소를 제외한 모든 값을 의미한다. - 해당 컴포넌트에서는 HTML의 a 태그 처럼 Link 태그를 쓸 수 있다.
<Link to="주소">내용</Link>
이 Link 또한 react-router-dom 안의 기능이므로
import {Link} from 'react-router-dom';추가
만약 주소에 변수나 배열을 넣는다면 JS에서 했던것처럼 “ 안에 ${}로 넣으면 된다.
배열의 모든 값을 Link 태그 쓰는 방법은 map 함수를 쓴다.
useLocation,useSearchParams – import {} from 'react-router-dom'; 이 있어야 쓸 수 있다
둘 다 주소의 ? 뒷부분의 값을 찾아오는 함수이다. 둘의 차이점은 useLocation은 ?부터 해서 모든 값을 들고오고, useSearchParams는 state로 받아 와서(예:[searchParams,setSearchParams]) searchParams.get(“이름”) 으로 개별을 들고 온다.
예를 들어 http://localhost:3000/about?name=12 의 경우
useLocation() 으로 들고오면 ?name=12 가 나오고 searchParams.get(“name”)으로 들고오면 12 가 출력된다. 한글의 경우 인코딩 하는 과정에서 나타나는 값으로 나온다.(예 : 뮤=%EB%AE%A4)
useParams – import {} from 'react-router-dom';이 있어야 쓸 수 있다.
해당 주소의 URL 파라미터로 전달된 값을 가져 올 수 있다.
단순 useParams()로 들고 온다면 객체형태로 들고 온다. 예:{value:apple}
let {객체이름}=useParams(); 로 들고온다면 해당 객체이름의 값을 들고온다.
useParams().객체이름 과 동일하다.
중첩 라우팅 : App.js에서 <Route/>로 만든 것을 <Route></Route>로 분리하고 그 사이에 하위의 <Route/> 를 넣어서 중첩되게 한다는 의미이다. 안의 Route에서 path의 경우 다 적을 필요는 없다. /articles/:id 라면 :id만 적어도 작동한다.
Outlet – import {} from 'react-router-dom';이 있어야 쓸 수 있다.
컴포넌트이며 중첩 라우팅을 통해 상위 컴포넌트를 레이아웃화 할 수 있다.children과 동일
App.js에서 화면에 계속 띄우고 싶은 Route가 있다면 Routes 밖에서 짜면 된다. return 안에 하나의 묶음만 가능하기 때문에 Routes가 Route를 div로 묶어주면 된다. 쓰는 방법은 일반적인 컴포넌트 출력처럼 하면 되고 컴포넌트 파일에는 [components폴더] Routes에서 짰던것처럼 똑같이 짜면 되고, 만약 변수나 배열을 쓴다면 똑같이 만들면 된다.
useNavigate – import {} from 'react-router-dom';필요
함수처럼 써서 페이지를 이동시킬 수 있다. 단독으로 쓰지는 못하고 변수에 담아야 한다.
let 변수명=useNavigate(); 처럼 담아야 하고 이를 이용해 <button onClick={()=>변수명("주소",{두번째인자})}>내용</button> 처럼 쓸 수 있다. 주소의 경우 주소를 넣으면 해당 주소로 이동하고 -1을 넣는다면 이전 페이지로 이동한다. 두번째 인자의 경우 해당이름에 값을 넣을 수 가 있다. 대표적으로 useLocation으로 불러낸 객체의 경우 state의 값이 비어 있는데 이 자리에 10을 넣는다고 한다면 state:10 을 넣으면 된다.
위의 주소에 해당하는 컴포넌트에 가서 useLocation으로 값을 받아와서 .state를 붙여보면 10이 들어온 것을 확인 할 수 있다.