4. 리액트 라우터 부가기능 · GitBook

[utterances-bot]

4. 리액트 라우터 부가기능 · GitBook

https://react.vlpt.us/react-router/04-extra.html

[SpookyJelly]

useHistory 훅을 사용하는것이랑 객체로 꺼내서 쓰는거랑 어떻게 차이가 있나요??

[sshusshu]

history 객체는 라우트로 사용된 컴포넌트에게 match, location 과 함께 전달되는 props 중 하나 컴포넌트 내에 구현하는 메소드에서 라우터에 직접 접근 (뒤로가기, 특정 경로로 이동, 이탈 방지)

withRouter HoC 는 라우트 컴포넌트가 아닌곳에서 match / location / history 를 사용

Switch 는 여러 Route 들을 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 (Not Found 페이지를 구현가능)

NavLink 는 Link 랑 비슷한데, 만약 현재 경로와 Link 에서 사용하는 경로가 일치하는 경우 특정 스타일 혹은 클래스를 적용 할 수 있는 컴포넌트

[yechukim]

react router 버전 6 에서는 history가 없어졌기 때문에 useNavigate을 사용할 수 있습니다.

...
  const navigate = useNavigate()

  const goBack = () => {

    const answer = window.confirm('정말 떠나시겠어요?')
    if (answer) {
      navigate(-1)
    }

  };
...

[gitwoojohn]

HistorySample.js : React-Router v6 (예제는 v5 코딩)

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

function HistorySample() {
   const navigate = useNavigate();
   const goBack = () => {
   const confirm = window.confirm('정말 떠나시겠어요?')
   if (confirm) {
      navigate(-1);
    }
  };

const goHome = () => {
    navigate('/');
  }
  return (
    <div>
      <button onClick={goBack}>뒤로가기</button>
      <button onClick={goHome}>홈으로</button>
    </div>
  );
}

[gitwoojohn]

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

function App = () => {
  const { pathname } = useLocation(); // 추가
 return ( ...

App.js v5 코딩

<Route
      // path 를 따로 정의하지 않으면 모든 상황에 렌더링됨
      render={({ location }) => (
        <div>
            <h2>이 페이지는 존재하지 않습니다:</h2>
             <p>{location.pathname}</p>
           </div>
        )}
/>

위 코드를 v6 코딩으로 변경

<Route path='/*' element={ <h1>이 페이지는 존재하지 않습니다. - {pathname}</h1> }

[Decker-Noh]

v6에서는 withRouter 안 쓰는 듯 해서 공부하면서 남겨요!

import React from "react";
import { useParams, useLocation, useNavigate } from 'react-router-dom';

const WithRouterSample = () => {
    const params = useParams(); // url에 대한 정보
    const location = useLocation(); // 현재 페이지에 대한 정보
    const navigate = useNavigate();
    return (
        <div>
            <h4>params</h4>
            <textarea value={JSON.stringify(params)} readOnly />
            <h4>location</h4>
            <textarea value={JSON.stringify(location, null, 2)} readOnly />
            <h4>navigate</h4>
            <button onClick={() => navigate(-1)}>홈으로</button>
        </div>

    )
}
export default WithRouterSample;

Profiles.js

import WithRouterSampe from "./WithRouterSample";
...
...
            <Routes>
                <Route
                path="/"
                element={"유저를 선택해주세요."}
                />
                <Route path="/:username" element={<Profile />} />
            </Routes>
            <WithRouterSampe /> //라우트팅이 아니니 Routes 밖에!

저처럼 한발짝 늦게 공부하시는 분들 화이팅!

[clean-teach]

v6 에서는 <NavLink>의 "activeStyle"과 "activeClassName"이 제거되었습니다.

참고 : https://reactrouter.com/en/main/components/nav-link