리액트 라우터 세팅

• 설치: npm install react-router-dom@5

 

• index.js 파일

import { BrowserRouter } from 'react-router-dom';

 

<BrowserRouter>

    <App />

</BrowserRouter>

--<App/>태그를 BrouserRouter로 감싸기

** HashRouter를 쓰는 경우 URL에 /#/추가됨

routing을 안전하게 하는 용도임

사이트 주소 뒤에 #이 붙는데 #뒤에 적는 것은 서버로 전달하지 않음

그래서 라우팅을 리액트가 알아서 잘 해줄 수 있다.

 

BrouwerRouter의 경우 라우팅을 리액트가 아니라 서버에게 요청할 수 도 있어서 위험하다.

서버가 그런 페이지 없는데? 하고 응답할 수 있음.

그래서 서버에서 서버 라우팅을 방지하는 API를 작성해둬야한다.

 

 

• App.js 파일

import { Link, Route, Switch } from 'react-router-dom';

<Route exact path="/">

    <div>메인 페이지에요</div>

</Route>

<Route path="/detail">

    <div>디테일페이지에요</div>

</Route>

<Route path="/djs" component={Modal}></Route>

<Route path="/:id">

</Route>

** exact라는 속성을 추가하면 경로가 정확히 일치할 때만 보여준다.

** :id는 /모든문자 라는 경로를 의미한다. 이때 url을 detail 로 입력해도 :id의 내용이 보인다 

이를 방지하기 위해 <Switch>태그로 <Route>태크 부분을 감싸준다.

 

• 뒤로 가기, useParams훅

Detail.js파일

import { useHistory, useParams } from 'react-router-dom';

let history = useHistory();

let { id } = useParams();

let 찾은상품 = props.shoes.find(function(상품){

return 상품.id == id

})

 

<button className="btn btn-danger"

onClick={ ()=>{ history.goBack() } }

>뒤로가기</button>

혹은

<button className="btn btn-danger"

onClick={ ()=>{ history.push('/') } }

>뒤로가기</button>

 

 

useParams 사용하기

 

App.js파일

<Route path="/detail/:id">

    <Detail shoes={ shoes }/>

</Route>

 

find 함수 

find()는 array 뒤에 붙일 수 있으며, 안에 콜백 함수가 들어간다.

콜백함수 내의 파라미터(상품)는 array 안에 있던 하나하나의 데이터를 의미한다.

return 오른쪽에는 조건식을 적을 수 있다. 이게 참인 데이터만 새로운 변수에 저장해준다.

조건식에서는 그걸 현재 URL의 /:id에 적힌 값과 상품의 영구번호 (상품.id)가 같은지 비교하고 있는 것이다.

 

그래서 /detail/0으로 접속시 찾은 상품이라는 변수를 출력해 보면 영구번호가 id:0인 데이터가 나온다.

detail.js

<h4 className="pt-5">{ 찾은상품.title }</h4>

<p>{ 찾은상품.content }</p>

<p>{ 찾은상품.price }</p>