router v5 & v6

🛠 BrowserRouter

• 동일

🛠 prompt

• 페이지를 실수로 나가는 경우를 막기위해서 이 구성요소를 사용하는데, 라우터 v6에서는 관련기능을 제외하고 릴리즈 되었다고 한다.

🛠 switch 대신 Routes

💫 v5

<Switch>
    <Route path="/" exact>
      <Redirect to="/quotes" />
    </Route>
    <Route path="/quotes" exact component={AllQuotes} />
  
    <Route path="/quotes/:quoteId" component={QuoteDetail} />
 
    <Route path="/new-quote" component={NewQuote} />
    
    <Route path="*" component={NotFound} />
   
</Switch>

💫 v6

<Routes>
  <Route path="/" element={<Navigate to="/welcome" />} />
  <Route path="/welcome/*" element={<Welcome />}>
    <Route path="new-user" element={<p>Welcome, new user!</p>} />
  </Route>
  <Route path="/products" element={<Products />} />
  <Route path="/products/:productId" element={<ProductDetail />} />
</Routes>

• v5
  • Switch 내부에 등록함.
  • 경로에 맞는 컴포넌트 등록시 그 페이지를 넣어주거나 component 속성값을 사용.
  • 정확한 경로 지정을 위해 exact 사용
  • 하위 경로를 모두 포함해야 할시 exact제외
• v6
  • Routes 내부에 등록함.
  • 경로에 맞는 컴포넌트 등록시 element 속성값 사용
  • default로 exact가 적용되어 쓰지 않아도됨.
  • 하위 경로를 모두 포함해야할시 path에 등록하는 경로 뒤에 *를 붙이도록 변경.

🛠 useHistory & useNavigate

💫 v5

import * as React from 'react';
import { Route, Switch, useHistory } from 'react-router';

const app =()=>{
	const history = useHistory();

	React.useEffect(() => {
       history.push('/home/asd');
    }, [])

}

💫 v6

import * as React from 'react';
import { Route, Routes, useNavigate } from 'react-router';

const app =()=>{
	const navigate = useNavigate();

    React.useEffect(() => {
        navigate('/home/asd');
    }, []);
}

• v5
  • useHistory를 이용하여 페이지 이동
• v6
  • useNavigate를 이용하여 페이지 이동

🛠 페이지 이동 - Link

• v5
  • Link : 절대 경로를 사용해야 페이지 이동 가능
• v6
  • Link : 상대 경로로도 페이지 이동이 가능

🛠 리다이렉트

💫 v5

	<Switch>
	      <Route path="/" exact>
	        <Redirect to="/welcome" />
	      </Route>
	      <Route path="/welcome">
	        <Welcome />
	      </Route>
	      <Route path="/products" exact>
	        <Products />
	      </Route>
	      <Route path="/products/:productId">
	        <ProductDetail />
	      </Route>
	    </Switch>

💫 v6

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

const Products = () => {
  const navigate = useNavigate();
  navigate("/welcome", { replace: true });

  return (
    <section>
      <h1>제품 리스트</h1>
      <ul>
        <li>
          <Link to="/products/p1">마들렌</Link>
        </li>
        <li>
          <Link to="/products/p2">휘낭시에</Link>
        </li>
        <li>
          <Link to="/products/p3">까눌레</Link>
        </li>
      </ul>
    </section>
  );
};

export default Products;

• v5
  • redirect를 사용하여 리다이렉트 이루어짐.
  • 속성값이 default와 push 사용
• v6
  • Navigate를 사용하여 리다이렉트 이루어짐.
  • 속성값이 default와 replace 사용

🛠 파라미터 확인

💫 v5

	import * as React from 'react';
	import { useRouteMatch } from 'react-router-dom';
	
	const  app=()=> {
	
	    const match = useRouteMatch();
	
	    React.useEffect(() => {
	        console.log(match.params);
	    }, [])
	
	    return (
	        <div>
	            <h2>mainpage</h2>
	        </div>
	    )
	}
	
	export default app;

💫 v6

import * as React from 'react';
import { Link, useParams } from 'react-router-dom';

const app = ()=> {

  const params = useParams();

  React.useEffect(() => {
      console.log(params);
  }, [])

  return (
      <div>
         
            <h2>mainpage</h2>
      </div>
  )
}

export default app;

• v5
  • 파라미터로 전달된 값을 확인시 match의 params 값 확인
• v6
  - useParams 사용

  ---
  
  [도움 & 참고![](https://velog.velcdn.com/images/hazel123/post/eec65ec0-5d3f-4f5d-86ef-68a533454c6c/image.png)

  ](https://jforj.tistory.com/241)