라우터 기본 사용법과 link와 navLink의 차이

리액트 v6.0이 되면서 navLink가 조금 바뀐 것 같다.

 

리액트 라우터 사용법

설치

npm install react-router-dom

 

라우터적용

//index.js

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

ReactDOM.render(
    <BrowserRouter>
    	<App />
    </BrowserRouter>,
  document.getElementById('root')
);

HTML5의 history API를 제공하는 Router 이다.

 

속성(props)으로 줄 수 있는 것은 다음과 같다.

 

- basename: base URL을 설정해줄 수 있다.

<BrowserRouter basename="/calendar">
    <Link to="/today"/> // renders <a href="/calendar/today">
    <Link to="/tomorrow"/> // renders <a href="/calendar/tomorrow">
    ...
</BrowserRouter>

리액트로 배포를 하게 될때

 

package.json에

"homepage": "http://kangyunho.com/github-io",

처럼 쓰게 된다.

 

CRA에서 만든 프로젝트는 루트('/') 를 기준 URL로 해서 프로젝트를 생성하지만,

 

배포시에는 다르기 때문에

 

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

const rootNode = document.getElementById('root');

ReactDOM.createRoot(rootNode).render(
  <React.StrictMode>
    <BrowserRouter basename={process.env.PUBLIC_URL}>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
);

와 같이 써주면 접근할 baseURL을 알아서 찾아서 들어가게 된다.

 

 

- getUserConfirmation

 

페이지 전환시에 사용할 콜백을 넣을 수 있다.

<BrowserRouter
  getUserConfirmation={(message, callback) => {
    // this is the default behavior
    const allowTransition = window.confirm(message);
    callback(allowTransition);
  }}
/>

 

 

 

- forceRefresh

<BrowserRouter forceRefresh={true} />

페이지 전환시에 ssr처럼 전체 페이지 refresh해준다.

 

사실상 baseURL말고는 현재 프로젝트에서도 쓸 일이 없었고 앞으로도 없을 것 같은 느낌이다...

 

 

 

 

라우트 주소 설정하기

<Routes>
  <Route path="주소규칙1" element={해당 페이지 컴포넌트1} />
  <Route path="주소규칙2" element={해당 페이지 컴포넌트2} />
</Routes>

와 같이 설정 해 놓으면 해당 주소에 접근하면 해당 element를 보여준다.

 

spa를 위해 존재하는 리액트답게 라우트를 이용하면 엄청 쉽게 spa를 만들 수 있다.

 

 

원하는 곳에서 이동이 일어날 때  link컴포넌트를 이용해서 a태그처럼 사용할 수 있다.

 

link컴포넌트는 a태그 랑은 다르게 새로고침없이 history api를 이용해서 알아서 주소만 바꿔준다.

 

바닐라 js로 history api이용해서 라우터 구현했을때 머리 빠지는줄 알았는데... 킹갓리액트..

< Link to="경로">아무 글< /Link>

 

 

Not Found 주소

<Route path="*" element={<NotFound />} />

와 같이 * 를 이용하면 not found일때 어떤것을 보여줄지 정할 수 있다.

 

다만 위에서 설정해준 baseUrl/* 로 인식하기 때문에 

 

'http://localhost:3000/react-project/1번페이지' 로 접근해야 할 것을

'http://localhost:3000/react-project/이상한페이지' 로 접근하면 잘 잡아주는데

'http://localhost:3000/react' 로 접근해야 하면 못 잡아준다.

 

 

NavLink

링크의 주소와 현재 경로가 일치하면 특정 style을 적용할 수 있다.

 

그러니까 link랑 똑같은데 link됏을때 적용될 스타일을 정할 수 있다.

 

navigator같은거 만들면

 

이렇게 버튼 눌렀을때 뭐가 눌린상태인지 알려주기 위해서 쓰면 편리한 녀석이다.

 

  <NavLink style={({isActive}) => isActive ? activeStyle : inActiveStyle}
  <NavLink className={({isActive}) => isActive ? 'active' : inActiveStyle}

 

처럼 사용하면 된다.

 

 

className도 줄 수 있어서 꽤 활용도가 높은 편이다.

 

 

 

 

 

 

 

참고:

리액트를 다루는 기술

 

https://velog.io/@soonmac/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9A%B0%ED%84%B0-v6.0-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

[React] 리액트 라우터 v6.0 사용하기

 

https://v5.reactrouter.com/web/api/BrowserRouter/getuserconfirmation-func

Declarative routing for React apps at any scale | React Router