Router

• 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링해주는 라이브러리
• spa에서 새로운 페이지를 로드하지않고 하나의 페이지 안에서 필요한 컴포넌트만 가져와서 다른 페이지를 나타내는 방식을 지원한다.
• 멀티페이지어플리케이션에서는 새로운 페이지를 로드하며 페이지를 이동했었다.

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

1. 라우터 설치하기

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

---

2. 라우터 사용하기

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

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

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

2) 라우터 값 입력

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 이 일치하는 라우트 한개만 렌더링 시킨다.

---

3. 링크 설정

<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;

---

4. url 파라미터 =

App.js

import './App.css';
import { Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import Product from './pages/Product';
import Header from './components/Header';
import About from './pages/About';
import Subpages from './pages/Subpages';
import Subpage from './pages/Subpage';
import NotFound from './NotFound';

function App() {
  return (
    <div className="App">
      <Header sitename="green" />
      <Routes>
        <Route path='/' element={<Home/>} />
        <Route path='/product/:productname' element={<Product/>} />
        <Route path='/about' element={<About/>} />
        <Route path='/subpages' element={<Subpages />}>
          <Route path=':id' element={<Subpage />} />
        </Route>
        <Route path="*" element={<NotFound />}/>
      </Routes>
    </div>
  );
}

export default App;

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

Home.js

return()=>{
 <Link to="/product/productname">제품페이지 가기</Link> 
}

클릭 시 이동할 주소 지정하기

Product.js

const data = {
    item1: {
        title: "아이폰",
        price: "150만원",
        desc: "비싸고 예뻐요."
    },
    item2: {
        title: "갤럭시",
        price: "30만원",
        desc: "싸고 예뻐요."
    }
}

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"
)

---

5. 쿼리스트링 ?

App.js

return()=>{
  <Routes>
    <Route path='/about' element={<About/>}/>
</Routes>
}

return()=>{
 <Link to="/about?name=green&age=60">상세페이지</Link>
}

About.js

const location = useLocation(); //location 객체
//http://localhost:3000/about?name=green&age=60
//{ name: "green" , age: "60"}
const [ searchParams, setSearchParams ] = useSearchParams();  // ---> 배열리턴
const name= searchParams.get("name"); // green
const age= searchParams.get("age"); // 60
return (
	);

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

useSearchParams()는 [객체, 객체 업데이트 함수]를 가지는 배열을 반환한다.

• 객체는 {key : value}를 가지는 객체를 반환한다.
• key는 Home.js의 ? 이하의 =이전에 지정되어있다. (name, age)
• value는 Home.js의 ? 이하의 =이후에 지정되어있다. (green, 60)

---

6. 링크 이동 useNavigate

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

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

---

7. style 적용 NavLink

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

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

const Subpages = () => {
    const activeStyle = {
        backgroundColor: 'pink',
        fontSize: 24
    }

    return (
        <div>
            <ul>
                <li><NavLink to="/subpages/1"
                style={({isActive})=> isActive ? activeStyle : undefined}
                >서브페이지1</NavLink></li>
                <li><NavLink to="/subpages/2"
                style={({isActive})=> isActive ? activeStyle : undefined}
                >서브페이지2</NavLink></li>
                <li><NavLink to="/subpages/3"
                style={({isActive})=> isActive ? activeStyle : undefined}
                >서브페이지3</NavLink></li>
            </ul>
            <Outlet/>
        </div>
    );
};



export default Subpages;

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

---

8. NotFound 페이지 만들기

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

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

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