React Router

lim1313·2021년 8월 12일

TILPLUS

목록 보기

8/40

NavLink

Link의 확장버전으로 활성화된 라우터의 스타일을 적용하기 위한 컴포넌트 (activeStyle, activeClassName)

<NavLink activeClassName='active' exact to='/'>
   <i className='far fa-comment-dots'></i>
</NavLink>
<NavLink activeClassName='active' to='/about'>
   <i className='far fa-question-circle'></i>
</NavLink>

Route와 마찬가지로 exact를 사용하지 않는다면 '/about' 접근 시 '/'와 '/about' 둘다 만족하기 때문에 '/'와 '/about' 모두 active 스타일이 적용된다.

이를 방지하기 위해서 to 값이 '/'인 NavLink에 exact를 사용하면 다음 NavLink에는 active 스타일이 적용되지 않는다.

참고)
https://velog.io/@ksh4820/React-NavLink

Redirection

history

import React from 'react';
import { withRouter } from 'react-router-dom'; 

const Home = ({ history }) => {
  return (
    <div onClick={() => history.push('/auth')}>Hello!</div>
  );
};

export default withRouter(Home);

history 객체를 사용하기 위해서는 withRouter hoc를 이용하여 컴포넌트를 감싸주어야 작동

그러나 만약 컴포넌트에 Redux나 Mobx를 이용한 store 이용으로 인해서 withRouter 말고도 다른 hoc들이 컴포넌트를 감싸게 된다면 hoc 충돌로 인하여 작동하지 않을 수 있다.

해결방법은 useHistory라는 hooks사용!!

useHistory

useHistory는 일반적인 history 객체와 똑같은 객체를 가지므로 사용법이 동일하다.

<script> // 리액트

import React from 'react';
import { useHistory } from 'react-router-dom';

const Home = () => {
  const history = useHistory();
  const click = () => {
  	history.push('/auth')
  }
  
  return (
    <div onClick={click}>
      <div>Hello!</div>
    </div>
  );
};

export default Home;

</script>

useLocation

useLocation hooks는 사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hooks

<script>

import React from 'react';
import { useLocation } from 'react-router-dom';

const Home = () => {
  const location = useLocation();
  console.log(location);
  
  return (
    <></>
  );
}

export default Home;

</script>

pathname은 만약 웹 url이 http://localhost:3000/home?keyword=리액트 이라고 가정했을때, 쿼리스트링을 제외한 /home이 출력된다.

search는 pathname이 출력했던 부분을 제외한 쿼리스트링이 출력되며, 결과는 ?keyword=리액트 라는 출력결과가 나온다.

출력된 값은 query-string이라는 쿼리스트링 파싱 라이브러리를 이용하여 제대로 된 값을 얻어낼 수 있다.
npm i query-string

<script>
import React from 'react';
import { useLocation } from 'react-router-dom';
import queryString from 'query-string';

const Home = (): JSX.Element => {
  const { search } = useLocation();
  // search: ?keyword=리액트
  
  const { keyword } = queryString.parse(search);
  // keyword 출력결과: "리액트"
  
  return (
    <></>
  );
}

export default Home;
</script>

useParams

useParams는 path parameter의 정보를 얻을 수 있는 hooks

<script>
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from 'components/Home';

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path='/home/:id' component={Home} />
        {/* id라는 동적 라우팅값을 걸어주었다. */}
      </Switch>
    </BrowserRouter>
  );
};

export default App;
</script>

: (콜론)을 이용하여 다음과 같이 설계해놓으면, /home/ 뒤에 1이 오든, 2가 오든, 혹은 문자열이 오든 상관없이 라우팅이 정상 작동된다.

기존에는 match props를 이용하여 match.params.id의 형식으로 접근을 해야 했지만, useParams를 이용하면 좀 더 간단하게 접근 가능하다.

<script>
import React from 'react';
import { useParams } from 'react-router-dom';

const Home = () => {
  const { id } = useParams();
  // 동적 라우팅 값으로 걸어둔 이름으로 객체를 가져올 수 있다.
  
  // 현재 주소의 값이 http://localhost:3000/home/3 일때
  console.log(id); // "3"이 출력된다.
  
  return (
    <></>
  );
};

export default Home;
</script>