React Router - useHistory로 경로 설정

react-router-dom의 useHistory Hooks를 사용하여 경로 설정을 해보도록 하겠습니다.

일반적인 useHistory 사용

import React from "react";
import {
  BrowserRouter,
  Switch,
  Route,
  Redirect,
  useHistory,
} from "react-router-dom";

// App 컴포넌트
const App = () => {
return (
    <BrowserRouter>
      <Buttons />
      {/* 라우팅 */}
      <Switch>
        <Route exact path="/about" component={About} />
        <Route exact path="/skills" component={Skills} />
        <Route exact path="/projects" component={Projects} />
        <Route path="/" render={() => <Redirect to="about" />} />
      </Switch>
    </BrowserRouter>
  );
};

const history = useHistory();

return ( 
    <div>
      <button onClick={() => history.push("/about")}>About</button>
      <button onClick={() => history.push("/skills")}>Skills</button>
      <button onClick={() => history.push("/projects")}>Project</button>
    </div>
  );
};

// 기타 컴포넌트들
const About = () => <div>This is About Component</div>;
const Skills = () => <div>This is Skills Component</div>;
const Projects = () => <div>This is Projects Component</div>;

export default App;

import { useHistory } from "react-router";

const history = useHistory();

<button onClick={() => {history.push("/Next")}} />

보통 위와 같은 형태로 history.push()를 사용합니다.

props 넘기기

import { useHistory } from "react-router";

const history = useHistory();

 <button onClick={() => {history.push({
   pathname: "/Next",
   state: {displays: displays}
  })}} />

props를 넘기고 싶은 경우에는 위와 같이 사용할 수 있습니다.

props 받기

import { useLocation } from "react-router";

const location = useLocation();

const item = location.state.displays;

props를 받아서 사용하고 싶은 경우에는 위와 같이 useLocation을 사용하여 받으면 됩니다. useLocation은 현재 페이지에 대한 url 정보를 알려주는 Hooks로 url이 바뀔 때마다 새로운 location이 반환됩니다.

useLocation의 내용물

1. pathname : 현재 경로
2. search: ?부터 나오는 문자열 ex) ?id=1
3. hash : #부터 나오는 문자열 ex) #id=1 (search와 hash 동시에 사용할 수 있다!)
4. state: 숨겨서 보내는 정보
5. key: 고유한 문자열 키.

✔️ 참고 사이트

• https://byul91oh.tistory.com/467
• https://velog.io/@duswn38/React-react-router%EB%A1%9C-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9D%B4%EB%8F%99%EC%8B%9C-props-%EB%84%98%EA%B8%B0%EA%B8%B0

🔔포스팅 공지
개인 공부 기록용 블로그 입니다.
잘못된 부분이 있을 시 메일이나 댓글로 지적해주시면 감사드리겠습니다 :)