[React] 📜리액트 라우터 v6 사용법🧹

✔️ 리액트 라우터 v6 사용법

리액트 라우터 6.3.0 버전을 설치

npm install react-router-dom@latest
//❗️참고) 리액트 라우터는 버전에 따라 사용법이 다르다.

---

📜 BrowserRouter

History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해준다.
(즉, UI를 URL과 동기화된 상태를 유지해주는 역할)
상위에 작성되어야 React Router의 컴포넌트들을 사용할 수 있다.

아래와 같이 ReactDOM의 렌더 단계인 index.js 에서도 활용 가능.

// index.js (React Version 18 기준)
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

-----
// index.js (React Version 17 기준)
import { BrowserRouter } from 'react-router-dom';

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

---

📜 Routes, Route

경로를 매칭해주는 역할을 하는 컴포넌트.

▷ Routes
Route Config하는 경로 객체 트리를 생성한다. Route는 Routes안에서만 유효하다.
(Route로 생성된 자식 컴포넌트 중에서 매칭되는 첫번째 Route를 렌더링하는 역할)

▷ Route
path가 현재 URL과 일치하면 element가 렌더링 된다.

라우팅 예제

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/MyPage" element={<MyPage />} />
    <Route path="/Dashboard" element={<Dashboard />} />
  </Routes>  
</BrowserRouter>

---

📜 Link

해당 컴포넌트를 클릭할 때, Route의 path와 일치하는 페이지로 이동할 수 있게 해주는 컴포넌트이다.

<Link to="path" />

링크 예제

import { BrowserRouter, Routes, Route, Link } from "react-router-dom"

function App() {
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/MyPage" element={<MyPage />} />
      <Route path="/Dashboard" element={<Dashboard />} />
    </Routes>  
  </BrowserRouter>
}

function Home() {
  return (
    <>
      <h1>Home</h1>
      <Link to="/MyPage">MyPage</Link> | <Link to="/Dashboard">Dashboard</Link>
    </>
  );
}

// MyPage 컴포넌트
function MyPage() {
  return <h1>MyPage</h1>;
}

// Dashboard 컴포넌트
function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default App;

Link 안에 버튼이 있으면 키보드로 탭 했을 시 두번 잡힌다.
한번만 잡히게 하려면 버튼에 tabIndex='-1'를 추가해주면 된다.

<Link to='/signup'>
  <button className='signup' tabIndex='-1'>
    <div className='signup-bg'>
      <span>Sign up</span>
    </div>
  </button>
</Link>

---

📜 Outlet

Outlet은 라우팅이 중첩될 때 사용한다.

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/MyPage" element={<MyPage />}>
      <Route path="/Dashboard" element={<DashboardPage />} />
    </Route>
  </Routes>  
</BrowserRouter>

-----
/* MyPage */
<div>
  <h1>MyPage</h1>
  <Link to="/MyPage/Dashboard">Dashboard<Link>
  <Outlet />  /* Dashboard의 component가 Outlet의 위치에 위치하게 된다. */
</div>

---

📜 useLocation

pathname을 알아낼 수 있다.

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

const { pathname } = useLocation();

쿼리 알아내기

const { search } = useLocation();
const query = new URLSearchParams(search).get('q');

---

📜 useMatch

현재 경로와 일치하는지 아닌지

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

const isInterestPage = useMatch('/interest');

---

📜 useParams

파라미터 정보를 가져와 활용하고 싶을 때 사용한다.

/* App.js */   
<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/MyPage" element={<MyPage />} />
    <Route path="/Dashboard/:id" element={<DashboardPage />} />
  </Routes>  
</BrowserRouter>

-----
/* MyPage.js */   
return (
  <>
    {data.map(item => (
      <Link to={`/Dashboard/${item.id}`} key={item.id}>
        <h2>{item.title}</h2>
      </Link>
    ))}
  </>
)   
        
-----
/* DashboardPage.js */
const {id} = useParams();

return <div>DashboardPage {id}</div>

---

📜 useNavigate

양식이 제출되거나 특정 event가 발생할 때, url을 조작할 수 있는 interface를 제공한다.

간단한 예시

const navigate = useNavigate(); /* 변수에 저장해서 사용*/

return <h1 onClick={() => navigate("/")}>logo</h1>
/* 이렇게 하면 logo를 클릭했을 때 메인 페이지로 이동하게 됨 */

뒤로가기 / 앞으로가기 예시

const navigate = useNavigate();

const goBack = () => {
  navigate(-1);
  // history.go(-1)
}

const goForward = () => {
  navigate(1);
  // history(1)
}

return (
  <>
    <button onClick={goBack}>뒤로가기</button>
    <button onClick={goForward}>앞으로가기</button>
  </>
)

replace

navigate('/news/all', { replace: true });

---

📜    *   

만약 사용자가 지정되지 않은 주소로 접근할 시 이 속성이 설정되어 있는 컴포넌트를 보여주게 된다.

/* 상단에 위치하는 라우트들의 규칙을 모두 확인, 일치하는 라우트가 없는경우 처리 */
<Route path="*" element={<NotFound />}></Route>

---

📜 useLocation

현재 URL 경로 정보를 반환해 주는 역할을 한다.
현재 페이지의 경로를 파악하거나, 쿼리 스트링 등 URL에 대한 정보를 가져올 수 있다.

페이지마다 배경 색상을 다르게 주고 싶을 때 예시

/* GlobalStyle.js */
import { createGlobalStyle } from 'styled-components';
import { useLocation } from 'react-router-dom';

const GlobalStyled = createGlobalStyle`
  body {
    background-color: ${({ backgroundColor }) => backgroundColor || '#FFF'};
  }
`;

export function BackgroundColor() {
  const location = useLocation();
  let backgroundColor;
  switch (location.pathname) {
    case '/login':
    case '/signup':
      backgroundColor = '#F1F2F3';
      break;
    default:
      backgroundColor = '#FFF';
  }

  return <GlobalStyled backgroundColor={backgroundColor} />;
}

/* App.js */
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { BackgroundColor } from './GlobalStyle';

function App() {
  return (
    <>
      <BrowserRouter>
        <BackgroundColor /> // 여기에 추가함
        <Routes>
          <Route ...>
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

---

📜 NavLink

일치하는 경우 추가적인 스타일 또는 클래스를 적용할 수 있도록 도와준다.

일반적인 사용방법

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

<NavLink
  to="/home"
  style={({ isActive }) => (isActive ? { opacity: 1 } : {})}
>
  Home
</NavLink>

styled-components와 함께 사용하는 방법

const StyledLink = styled(NavLink)`
  text-decoration: none;
  margin-right: 78px;

  &:last-of-type {
    margin-right: 0;
  }

  span {
    color: var(--white-100);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
    opacity: 0.6;
  }

  &.active span {   ~~~이 부분임~~~
    opacity: 1;
  }

  button {
    display: flex;
    justify-content: center;
    align-items: center;
  }
`;

.....
<StyledLink to={`/feed/${groupId}`}>
  <button>
    <span>Feed</span>
  </button>
</StyledLink>

---

📜 query

const navigate = useNavigate();

navigate(`/search?q=${query}`);

const location = useLocation();

const { search } = useLocation();
const query = new URLSearchParams(search).get('q');

👉 React-Router 깃헙
👉 React Router 공식 문서