๐Ÿคฉ CRA, React Router dom๋ฅผ ์ด์šฉํ•˜์—ฌ ์ด์ „ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•˜๊ธฐ (+ Next.js๋„ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•)

leehyunjuยท2021๋…„ 7์›” 24์ผ
0
post-thumbnail

๋จผ์ € CRA๋กœ ๋งŒ๋“  ํ”„๋กœ์ ํŠธ์— react-router-dom ์„ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค.

  1. yarn add react-router-dom
  2. npm install react-router-dom
import React from "react";
import { AlarmHeader, AlarmWrap, Back, Title } from "./styles";
๐Ÿ“ import { useHistory } from "react-router-dom";

type Props = {
  title?: string;
};

const alarm: React.FC<Props> = ({ title }: Props) => {
  ๐Ÿ“ const history = useHistory();

  return (
    <AlarmHeader>
      <AlarmWrap>
        ๐Ÿ“ <Back onClick={() => history.goBack()}>
          <img
            src={process.env.PUBLIC_URL + "/images/header_back.svg"}
            alt="๋’ค๋กœ๊ฐ€๊ธฐ"
          />
        </Back>

        <Title>{title}</Title>
      </AlarmWrap>
    </AlarmHeader>
  );
};

export default alarm;

useHistory๋ผ๋Š” Hook์„ ์‚ฌ์šฉํ•˜์—ฌ ์ •๋ง ๊ฐ„๋‹จํ•˜๊ฒŒ ์ด์ „ ํŽ˜์ด์ง€๋กœ ์ด๋™ ํ•  ์ˆ˜ ์žˆ๋‹ค.

<Back onClick={() => history.goBack()}>

๊ทธ๋ฆฌ๊ณ  ๋ฒ„ํŠผ์—๋‹ค๊ฐ€ onClick ์ด๋ฒคํŠธ๋ฅผ ๋„ฃ์–ด์ฃผ๊ธฐ.


Next ๊ธฐ๋ฐ˜ ํ”„๋กœ์ ํŠธ, ์ „ ํŽ˜์ด์ง€๋กœ ๊ฐ€๊ธฐ

next ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๋งŒ๋“ค์–ด์ง„ ํ”„๋กœ์ ํŠธ์—๋Š” next ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ž์ฒด ๋‚ด์— next/router ๋ผ๋Š” ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ด์ค๋‹ˆ๋‹ค.

import styled from '@emotion/styled'
๐Ÿ“ import { useRouter } from 'next/router'

const SettingButton = () => {
  ๐Ÿ“ const router = useRouter()

  return (
    <Container>
      <button type="button" className="save">
        ์ €์žฅ
      </button>

      ๐Ÿ“ <button type="button" className="back" onClick={() => router.back()}>
        ๋’ค๋กœ
      </button>
    </Container>
  )
}

์ฐธ๊ณ ์ž๋ฃŒ

https://nextjs.org/docs/api-reference/next/router

profile
์•„๋Š‘ํ•œ ๋‡Œ๊ณต๊ฐ„ ๐Ÿง 

0๊ฐœ์˜ ๋Œ“๊ธ€