[리액트] navigate (페이지 이동)

로그인 혹은 회원가입이나 아님 다른이유로 페이지 이동이 필요한 경우가 있을 것이다.

 

이 경우 Navigate를 사용하면 손쉽게 이동할 수 있다.

Install

npm i react-router-dom

Navigate는 리액트 라우터에 있는 라이브러리이다.

때문에 라우터가 없다면 설치가 필요하다.

 

import

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

다음과 같이 사용하고자 하는 곳에 import를 해준다.

 

변수 선언

  const navigate = useNavigate();

 

통신 후 사용

  const onSubmit = async (e) => {
    e.preventDefault();
    const joinData = await axios({
      url: `http://localhost:8031/join`,
      method: "POST",
      data: {
        userEmail,
      },
    });

    if (joinData.data === "success") {
      navigate("/");
    } else {
    
    }

하나의 예로 회원가입 후 루트 페이지로 이동하도록 하였다.

서버에 정상적, 성공적으로 통신이 진행되면 success를 받게된다.

그 데이터에 따라 

navigate("url") 원하는 url로 이동하할 수 있다.

 

전체 코드

- Front -

import axios from "axios";
import { useNavigate } from "react-router-dom";
import React, { useState } from "react";

const JoinPage = () => {
  const [userEmail, setUserEmail] = useState("");
  const navigate = useNavigate();
  
  const onSubmit = async (e) => {
    e.preventDefault();
    const joinData = await axios({
      url: `http://localhost:8031/join`,
      method: "POST",
      data: {
        userEmail,
      },
    });

    if (joinData.data === "success") {
      navigate("/");
    } else {
    }
    
    return(
        <form onSubmit={onSubmit}>    	        
        	<input
                type="email"
                placeholder="email"     
                onChange={(e) => {
                  setUserEmail(e.target.value);
                }}
             />
             
             <button type="submit">
                회원가입
             </button>
        </form>
    )
  };

- Back -

import lombok.RequiredArgsConstructor;

import com.sbb.sm_chatting.Repository.UserRepository;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.Map;

@Controller
@RequiredArgsConstructor
public class UserController {
    private final UserRepository userRepository;

    @PostMapping("/join")
    @ResponseBody
    public String login(@RequestBody Map<String, String> user){
        if(userRepository.existsByUserEmail(user.get("userEmail"))){
        	return "success";
        }
    }

}

확인하기 위함이기 때문에 service는 사용하지 않았다.