react-router-dom 사용법 알아보기
① 프로젝트에 라우터 적용
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
프로젝트의 가장 최상단인 index.jsx
에서 BrowserRouter
를 적용하면 자식에서 라우팅 기능을 사용할 수 있다.
② Route: 특정 주소에 컴포넌트 연결하기
<Route path="주소규칙" component={보여주고싶은 컴포넌트}> // 컴포넌트 방식
<Route path="주소규칙" component={() => JSX}> // JSX 렌더링 방식
JSX 렌더링 방식을 이용하면 props나 기타 값들을 전달할 수 있다.
③ Switch: 규칙이 일치하는 라우트 단 하나만 렌더링하기
Switch 는 여러 Route 들을 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링시켜준다.
Switch 를 사용하면, 아무것도 일치하지 않았을때 보여줄 Not Found 페이지를 구현 할 수도 있다.
예시
const App = () => {
return (
<div>
<ul>
<li>
<Link to="/">홈</Link>
</li>
<li>
<Link to="/about">소개</Link>
</li>
<li>
<Link to="/profiles">프로필 목록</Link>
</li>
<li>
<Link to="/history">예제</Link>
</li>
</ul>
<hr />
<Switch>
<Route path="/" exact={true} component={Home} />
<Route path="/about" component={About} />
<Route path="/profiles" component={Profiles} />
<Route path="/history" component={HistorySample} />
<Route
// path 를 따로 정의하지 않으면 모든 상황에 렌더링됨
render={({ location }) => (
<div>
<h2>이 페이지는 존재하지 않습니다:</h2>
<p>{location.pathname}</p>
</div>
)}
/>
</Switch>
</div>
);
};
exact
란?/about
,/profiles
,/history
path규칙은/
와 매칭된다. 따라서 정확하게/
일때만 동작하도록 명시하는 prop이다.
만약 그냥 작성하면??
<Router>
<Route exact path="/" component={Home} />
<Route path="/movies" component={Movies} />
<Route path="/reviews" component={Reviews} />
<Route component={PageNotFound} />
</Router>
어떤 url이던지 PageNotFound
컴포넌트가 보여지게 된다. 이런 문제를 해결하기 위해서 Switch
를 사용한다.
④ Link: 클릭하면 다른 주소로 이동시키기
<Link to='주소규칙'>자식</Link>
다른주소로 이동하는 방법
-
<a href="...">...</a>
- 주의점으로는 페이지를 아예 새로 불러오기 때문에 리액트 앱이 지니고 있는 상태들도 초기화되고 렌더링된 컴포넌트도 모두 사라진다.
- 사용 금지!
-
Link
컴포넌트 사용- 브라우저의 주소만 바꿀뿐 페이지를 새로 불러오지는 않는다.
⑤ 파라미터와 쿼리
파라미터: /profiles/younoah
쿼리: /about?details=true
파리미터
파라미터는 특정 id 나 이름을 가지고 조회를 할 때 사용
/profiles/detail
<Route path="/profiles/detail" component={Profile} /> // detail 얘는 경로
<Route path="/profiles/:username" component={Profile} /> // 얘는 파라미터
쿼리
쿼리는 어떤 키워드를 검색하거나, 요청을 할 때 필요한 옵션을 전달 할 때 사용
/about?q=검색키워드
⑥ useReactRouter Hook 사용하기
useReactRouter Hook 이란?
현재 경로에 대한 match / location / history 를 사용을 제공하는 훅이다.
import {
useHistory,
useLocation,
useParams,
useRouteMatch,
} from 'react-router-dom';
function RouterHookSample() {
const history = useHistory();
const location = useLocation();
const params = useParams();
const match = useRouteMatch();
console.log({ history, location, match, params });
return null;
}
export default RouterHookSample;
⑦ history, location, match
history
history
객체는 브라우저의 history와 유사하다. 스택(stack)에 현재까지 이동한 url 경로들이 담겨있는 형태로 주소를 임의로 변경하거나 되돌아갈 수 있도록 해준다.
-
action
: 최근에 수행된 action(push, pop, replace)- push : 새로운 URL이 history에 추가, 새로운 주소로 이동할 때
- pop : 새로운 URL이 history에서 제거, 뒤록 가기
- replace : 최근 경로를 histroy 스택에서 replace해서 페이지 이동
-
block(propt)
: history 스택의 push와 pop 동작을 제어 -
go(n)
: history 스택의 포인터를 n으로 이동 -
goBack()
: 이전 페이지로 이동 -
goForward()
: 앞 페이지로 이동 -
length
: 전체 history 스택의 길이 -
location
: 현재 페이지의 정보 -
push(path, state)
: 새 경로를 history 스택에 push해서 페이지 이동 -
replace(path, state)
: 최근 경로를 histroy 스택에서 replace해서 페이지 이동
match
match 객체에는 Route path
와 URL
의 매칭에 대한 정보를 가지고 있다.
-
isExact
:true
이면 경로가 완전히 정확할 경우에만 수행한다. -
params
: 경로에 전달된 파라미터 값을 가진 객체<Route path="/profiles/:username" component={Profile} />
에서 넘겨받은 파리미터path
: 현재 경로url
: 실제 경로
-
path
: Route에 정의된 경로 -
url
: 클라이언트로부터 실제 요청 받은 경로
location
location 객체는 현재 페이지에 대한 정보를 가지고 있다.
-
hash
: 현재 페이지의 hash 값 (localhost:3000/mypage?q=검색키워드#hashtag
) -
pathname
: 현재 페이지의 경로 -
search
: 현재 페이지의 query string- 쿼리가 문자열형태로 되어있기 때문에 파싱이 필요
params
match.params
와 동일
⑧ 자주 사용하는 문법은?
- 파라미터는
match.params
에서 받아온다. - 쿼리는
location.search
에서 받아온다.
Author And Source
이 문제에 관하여(react-router-dom 사용법 알아보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@younoah/react-router-dom저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)