React - v5 -> v6 버전에서의 변경사항

내가 따라해보고 있는 예제가 제대로 안돼서

열심히 구글링해보니...역시나 최신 버전에서는 변경된 사항들이 있었다.

사실 언제 바꼈는지는 정확히 모르지만,

여튼 내가 보는 예제는 21년도 예제이고, 23년~24년 초쯤 해당 사항으로 바뀐것 같긴하다.

 

---

1. NavLink

기존 : <NavLink activeStyle={activeStyle} exact className="link_second" to="/second">

변경 : <NavLink style={({ isActive }) => isActive ? activeStyle : undefined} exact className="link_second" to="/second">

 

위와 같이 activeStyle이 사라지고 style 부분으로 변경되었다.

 

2. Route

기존 : <Route path="/home" component={Home} />

변경 :

<Routes>

    <Route path="/" element={<Home />}></Route>

</Routes>

 

위와 같이 Route를 단독으로 사용할 수 없게 됐으며,

<Routes></Routes> 안에 Route를 넣어야하고, component가 element로 변경되었다.

 

물론 내가 사용법을 잘 몰라서 안되는 것일 수도 있지만,

일단 나는 위와 같은 방법으로 문제를 해결했다.

 

3. withRouter

예를 들어, 뒤로가기, 앞으로가기 버튼을 만든다고 했을 때

해당 기능 적용하기 위해서는 기존에는 withRouter에 history를 사용했었다.

 

하지만 v6 에서는 아래와 같이 useNavigate()를 사용하도록 변경되었다.

기존 :

go = () => {

    this.props.history.go(1);

};

goback = () => {

    this.props.history.goBack();

};

 

변경 :

const Navi = () => {

    const navigate = useNavigate();

 

    return (

        <div>

            <button onClick={() => navigate(-1)}>뒤로 가기</button>

            <button onClick={() => navigate(1)}>앞으로 가기</button>

        </div>

    );

}