0. App 을 감싸는 <BrowserRouter> 는 동일하다
1. Switch 대신 Routes,
2. Route의 자식으로, 컴포넌트가 아니라, element 안에 컴포넌트
[v5]===================
<Switch> // 1. Switch 대신 Routes,
<Route exact path="/"> // 2. "자식" 대신 "element"
<Redirect to="/welcome" />
</Route>
<Route path={"/products/:productsName"}>
<ProductDetail />
</Route>
</Switch>
[v6]===================
<Routes> // 1. Switch 대신 Routes,
<Route path="/welcome" elemen={ <Welcome />} /> // 2. "자식" 대신 "element"
<Route path={"/products/:productsName"} element={ <ProductDetail />} />
...
</Routes>
3. exact 의 삭제, 기본적으로 exact, "동시에 렌더되는 라우트를 실행하고 싶다면 (중첩 X ) * "
[v5]===================
<Switch>
<Route exact path="/">
<Redirect to="/welcome" />
</Route>
<Route path="/welcome">
<Welcome />
</Route>
<Route exact path={"/products"}>
<Products />
</Route>
<Route path={"/products/:productsName"}>
<ProductDetail />
</Route>
</Switch>
[v6]===================
<Routes>
<Route path="/welcome" element={ <Welcome />} /> // exact 의 제거, 기본적으로 exact 가 들어가있다.
<Route path={"/products/*"} element={ <Products />} /> // * 을 추가하여, 앞의 경로만 일치한다면 동시에 렌더
<Route path={"/products/:productsName"} element={ <ProductDetail />} />
</Routes>
==> product 로 시작하기만 하면 두번째 <Products /> 를 동시에 렌더
4. 라우트를 찾는 알고리즘의 변화, 이제 라우트 순서는 하나도 중요하지 않다.
<Routes>
<Route path="/welcome" element={ <Welcome />} />
<Route path={"/products/*"} element={ <Products />} />
<Route path={"/products/:productsName"} element={ <ProductDetail />} />
</Routes>
==> 이것을 실행해도, "/products/q1" 에 들어가면
<Products /> 가 아니라, <ProductDetail /> 을 렌더한다.
이는, 리액트 라우트가 알아서" 모든 라우트를 찾고", "더 알맞는 라우트" 를 실행했기 때문
==> 명확한, "/products/:productsName" 을 정의했기 때문에, "/products/q1" 에 더 맞는 것은 세번째 라우트 라고 판단했기 때문
5. NavLink 의 스타일 주는 방법 변경
1) className 이 함수형을 받는다.
2) "파라미터.isActive" 속성을 통해, 이동 유무를 판단
3) true 면 스타일을 적용, false 면 ""
<NavLink className={(navData) => navData.isActive ? styles.active : ""}>
6. useParams 는 여전히 동일하다
7. Redirect 는 Navigate 로 변경되었다.
[v5]===================
<Route exact path="/">
<Redirect to="/welcome" />
</Route>
[v6]===================
<Route path="/" element={ <Navigate to = "/welcome"}/> /> // Navigate
replace 속성을 통해, 뒤로가기가 불가능한 페이지로 Redirect 도 가능하다
<Route path="/" element={ <Navigate replace to = "/welcome"}/> />
6. Route 는 "반드시" Routes 안에 감싸져있어야한다.
[v5]===================
<Route exact path="/">
<Redirect to="/welcome" />
</Route>
[v6]===================
<Routes>
<Route path="/" element={ <Navigate to = "/welcome"}/> />
</Routes>
7. 중첩 라우트의 구문이 변경되었다. [ 부모라우트의 * 의 사용 , 중첩라우트의 주소로 match.url 필요 없어짐 ]
[v5]===================
[상위 리우트 존재]
<Route path="/welcome" >
<{<Welcome /> }>
</Route>
[하위 라우트안의 중첩 라우트]
<Route path="/welcome/new-user">
<p> 신입이냐!</p>
</Route>
[v6]===================
[상위 리우트 존재] => v6의 기본적인 exact 속성에 의해, 정확히 일치하지 않으면, 저 페이지가 렌더되지 않는다.
<Route path="/welcome/* " element={<Welcome /> } /> => * 을 붙여준다. [앞만 같으면 같이 렌더되도록]
[하위 라우트안의 중첩 라우트]
<Link to ="new-user"> 새 유저 </Link> => Link 도 마찬가지이다
<Routes>
<Route path="new-user" element={<p> 신입이냐!</p>} /> => 중첩라우트는 "이미 부모 라우트의 주소가 포함되어있다.",
</Routes> 할일은 "추가적인 주소만 덧붙이는것 뿐이다." [ / 없음 주의]
8. 중첩 라우트를 만드는 새로운 방법 도입 [ 모든 라우트를 한곳에! ] import {Outlet} from "react-router-dom"
이제, Route 는 렌더하는 JSX 코드를, element 안에 넣어, "오프닝,클로징 태그가 없어졌다."
그럼 이제 그 안에는 새로운 기능이 들어간다.
바로, "중첩 라우트 기능"이다.
[v6]===================
<Routes>
<Route path="/" element={ <Navigate to = "/welcome"/>} />
<Route path="/welcome" element={ <Welcome />} >
<Route path="new-user" element={ <p> 신입이냐!</p>} /> => Route 의 사이에, 새 Route 를 넣으면, "중첩라우트가 만들어진다."
</Route>
<Route path={"/products/*"} element={ <Products />} />
<Route path={"/products/:productsName"} element={ <ProductDetail />} />
</Routes>
==> "모든 라우트를 한번에 볼 수 있어서 아주 좋다."
대신 중첩된 라우트가 코드 어디 위치에서 렌더될지 위치를 잡아주어야한다.
[중첩된 JSX]===================
import {Link, Outlet } from "react-router-dom";
function Welcome() {
return (
<div>
웰컴!
<Link to= "new-user"> 새 유저 </Link>
<Outlet /> // 중첩라우트가 들어갈 위치를 잡아주어야한다.
</div>
);
}
export default Welcome;
9. useHistory 의 삭제, useNavigate
[v5]===================
import { useHistory } from "react-router-dom"
cosnt history = useHistory()
history.push("/welcome")
[v6]===================
import { useNavigate } from "react-router-dom"
const navigate = useNavigate()
navigate("/welcome" , {replace : true}) // 기본은 navigate("/welcome")
// 객체형태로 추가적인 옵션 선택 가능
navigate(1) // 앞으로가기
navigate(-1) // 뒤로가기
navigate(-2) // 두번 뒤로가기
...
10. Prompt 가 사라져버렸다..!
댓글