[React] Attempted import error: 'Redirect' is not exported from 'react-router' (리액트 redirect 안됨)

어서오세요..! 🤗

<Routes></Routes> 해결하시고 또 뵙는거겠죠....? 

(나쁜놈들,,,)

 

react-router-dom 이 V5 -> V6 로 버전업되면서 변경된 사항입니다.

 

 

#  변경사항

• <Redirect/> 컴포넌트는 더 이상 존재하지 않음
• <Navigate/> 로 바뀜 (근데 이건 제가 잘못 사용한건지 먹히질 않더라구요 😭)
• useNavigate() Hook 릴리즈..! (이건 잘 먹힙니다..!!)

 

# 코드 구현

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

export default function SignIn(props){

    const navigate = useNavigate(); /// ....

    const click = (e)=>{
        console.log("what the heck...;;;");
        navigate("/home"); // 이렇게 하시면 됩니다..... ㅎ..... 하ㅏ... 하ㅏㅏ하하ㅏㅎ
    };

    return(
        <div>
            <button onClick={click}>redirect.................</button>
        </div>        
    );
}

 

 

# 나는 Route 부터 막히는데...? 😢

[React] A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in

 

 

 

 

 

---

# Reference

Notes on handling redirects in React Router v6, including a detailed explanation of how this improves on what we used to do in v

 

 

How to upgrade React Router v5 to v6