페이지 랜더링 Router

각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링해주는 라이브러리

싱글페이지어플리케이션에서 새로운 페이지를 로드하지 않고 하나의 페이지안에서 필요한 컴포넌트만 가져와서 다른 페이지를 나타내는 방식을 지원

멀티페이지어플리케이션에서는 새로운 페이지를 로드하며 페이지를 이동했었다.

라우팅: 사용자가 요청한 url에 따라 해당 url에 맞게 페이지를 보여주는 것

---

라우터 설치

터미널에 npm install react-router-dom입력하여 install

라우터 사용

1. 상위 컴포넌트에 라우터 적용

[index.js]

import { BrowserRouter } from 'react-router-dom';

root.render(
    <BrowserRouter>
    	<App />
    </BrowserRouter>
);

2. 라우터 값 입력

[App.js]
import { Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import Product from './pages/Product';

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="경로" element={<경로에 따라 나타날 component명/>}/>
        <Route path='/' element={<Home/>}/>
        <Route path='/product' element={<Product/>}/>
      </Routes>
    </div>
  );
}

export default App;

💡 Routes컴포넌트는 여러 Route를 감싸서 그중 url이 일치하는 라우트 한개만 렌더링 시킨다.

---

링크 설정

<Link to="경로"></Link>

import React from 'react';
import { Link } from 'react-router-dom';

const Home = () => {
	return (
		<div>
			<h2>홈</h2>
			<p>가장 먼저 보여지는 페이지 입니다.</p>
			<Link to="/product">제품페이지 가기</Link>
		</div>
	);
};

export default Home;

url 파라미터 =

[App.js]
return()=>{
  <Routes>
    <Route path='/product/:item1' element={<Product/>}/>
</Routes>
}

Product 컴포넌트에서 파라미터로 지정받을 키를 item1로 지정했다.

[Home.js]
return()=>{
 <Link to="/product/item1">제품페이지 가기</Link> 
}

클릭시 이동할 주소를 지정했다.

[Product.js]

const data={
	item1:{title: '아이폰', price: '1,500,000'},
	item2:{title: '갤럭시', price: '300,000'}
}

const params= useParams();
return(
  {data[params.name]}
)

useParams()는 {key:value}를 가지는 객체를 반환한다.
그 객체의 key는 [App.js]의 path의 /:이하에 지정되어있다. (👉name)
그 객체의 value는 [Home.js]의 Link to="주소/이하"에 지정되었다. (👉item1)

🎈 그래서... 파라미터의 값으로 객체에 접근할 수 있다.

const {name}= useParams(); //구조분해할당 
return(
  {name} // 👉"green"
)

쿼리스트링 ?

[App.js]
return()=>{
  <Routes>
    <Route path='/about' element={<About/>}/>
</Routes>
}

[Home.js]
return()=>{
 <Link to="/about?name=green&age=30">상세페이지</Link>
}

[About.js]
const location=useLocation();
const [searchParams, setSearchParams]=useSearchParams();
const name= searchParams.get("name"); //👉green
const age= searchParams.get("age"); //👉30
return (
	);

useLocation()는 search를 가지는 객체를 반환한다.

useSearchParams()는 [객체,객체 업데이트 함수]를 가지는 배열을 반환한다.
그 객체는 {key:value}를 가지는 객체를 반환한다.
그 key는 [Home.js]의 ? 이하의 =이전에 지정되어있다. (👉name, age)
그 value는 [Home.js]의 ? 이하의 =이후에 지정되어있다. (👉green, 30)

링크 이동 useNavigate

Link 컴포넌트를 사용하지 않고 다른 페이지로 이동을 해야할 때 사용 하는 Hook

const navigate= useNavigate
navigate(-1) // 👉 이전 페이지로 이동
navigate(+1) // 👉 다음 페이지로 이동
navigate('경로') // 👉 경로로 이동

style 적용 NavLink

링크에서 사용하는 경로가 현재 라우트의 경로와 일치하는 경우 특정 스타일 또는 css클래스를 적용하는 컴포넌트

const activeStyle={
	backgroundColor: "pink"
}
<NavLink style={({isActive})=> isActive? activeStyle: undefined}>

NavLink 컴포넌트를 사용하며 style 또는 className을 설정하면
{isActive:boolean}을 파라미터로 전달받는 함수 타입의 값을 전달한다.
이 isActive의 값은 링크에서 사용하는 경로가 현재 라우트의 경로와 일치하면 true가 된다.

NotFound 페이지 만들기

• 미리 정의되지 않은 경로에 사용자가 진입했을 때 보여지는 페이지
• 페이지를 찾을 수 없을 때 나타나는 페이지

<Route path="*" element={<NotFound/>}>

설정이 없는 모든 경로에 접근 했을때