라우터 v5=>v6 변경

태권·2022년 8월 15일
0

개념알기

목록 보기
19/26

1.Switch가 사라지고 Routes로 대신함
원래 Switch자리에 Routes로 바꿔주기만 하면된다.

2.useHistory가 사라짐 대신 useNavigate 사용

history.goback()
navigate(-1)
history.push("/")
navigate('/')
  1. useRouteMatch가 사라지고 상대경로 쓸수 있게됨
<Link to={match.url}/>
<Link to={''}

'/about'과 'about' 앞에껀 그페이지로 이동이고 뒤에껀 지금 url에 붙여서 간다는 뜻

4.Route에 자식이나 컴포넌트대신 element 사용

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

그리고 exact도 사라짐 이제 자동으로 적용된다.
서브경로가 필요한경우 path 뒤에 /*을 붙여준다

  1. Route는 Routes의 직속자식이어야한다.
  • 이제 Route 쓸때 무조건 Routes 부모를 가지고 있어야함

6.옵셔널 URL파라미터가 사라짐, 이제 필요하면 2개 만들어야된다.

7.서브라우트 구현 Outlet
서브라우트를 가지는 부모 라우트에 자식으로 넣어주고 자식 컴포넌트 자리에

<Outlet/>

을 써주면된다.

8.NavLink에 activeStyle,activeClassName 사라짐

style={({isActive}) => ({color : isActive ? 'red' : 'blue'})}
className ={({isActive})=>"nav" + (isActive? "activated : '')}

이런식으로 줄수 있다

profile
2022.08 개발자 시작

0개의 댓글