[리액트] 라우팅하기, useNavigate, outlet

라우팅
1. 라우팅 개념, react-router-dom 깔기
2. route 기본 형태
3. react-router-dom 사용하기
4. 라우트 사용 구조 분석
5. 서브 라우트 구현하기

1. 라우팅

• 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것
• react에는 react-router-dom 라이브러리 사용

$ npm install react-router-dom

2. route 기본 형태

• App.js
  

function App() {
  return (
    <BrowserRouter basename="comento-shop">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/product/:productId" element={<ProductDetail />} />
        	
        <Route path="/basket" element={<Basket />} />
      </Routes>
    </BrowserRouter>
  );
}

• 라우팅 페이지

const Home = () => {
  return <div> 홈 </div>;
};

export default Home;

3. react-router-dom 사용하기

• BrowserRouter > Routes > Route 구조
• useNavigate
  • navigate("/2") : 괄호 내부의 url로 이동
  • navigage(-1) : 한페이지 전으로 이동

const navigate = useNavigate()
return (
	<div> 
		<button
  			onClick ={()=>{
  				navigate("/");
			}}
		>
		Home
		</button>
		<button
  			onClick ={()=>{
  				navigate(-1);
			}}
		>
		Home
		</button>
		<button
  			onClick ={()=>{
  				navigate('/posts/2');
			}}
		>
		Home
		</button>

• Link 상대 경로 사용 : 현재 위치에 기반하여 설정
  • to="" : 현재 위치 이동
  • to="about" : 현재위치/about 이동
  • !!!주의!!!
    to="/about" : /를 붙이면 /about 페이지로 이동

<Link to="">1 </Link>

4. 라우트 사용 구조 분석

• Route 내부에 path 속성, element 속성

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

• Route 컴포넌트는 Routes 직속 자식이어야 한다
  ▶️ user component에도 라우트를 사용한다면, Routes 내부에 사용 필수

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

5. 서브 라우트 구현하기

• Outlet 사용
  1) App.js
• Route 내부에 서브 라우트 넣어주기
  

function App() {
  return (
    <BrowserRouter basename="comento-shop">
      <Routes>
        <Route path="/" element={<Home />}>
				<Route path="/product/:productId" element={<ProductDetail />} />
		</Route>
        <Route path="/basket" element={<Basket />} />
      </Routes>
    </BrowserRouter>
  );
}

2) user Component

• Outlet을 원하는 곳에 붙이기

const Home = () => {
  return <div> 홈 
  	<Link to="about">About</Link>
  	username 
     </Link>
  	<Outlet/>
  </div>;
};

export default Home;