[React_study] React Router (setting & routing & Link)

* React Router

- 만약 페이지를 나누고 싶다면 일반 html, css, js에서는 그냥 html 파일을 여러개 만들면 된다.

하지만 리액트에서는 html파일을 하나만 사용한다.

그래서 리액트에서는 누가 다른 페이지 요청을 하면 내부에 있는 <div>를 바꿔준뒤 render해주면 된다.

react-router-dom이라는 외부 라이브러리를 이용해 구현하는게 일반적이다.

 

* React-router-dom 설치 및 셋팅 방법

• 아래의 명령어를 이용해 설치

npm install react-router-dom@6

---

• 셋팅은 index.js 파일에서 import { BrowserRouter } from "react-router-dom";
• <BrowserRouter>을 이용해 <App/>을 감싸주면 된다.

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </React.StrictMode>
);

 

(참고) 내가 만든 js파일들은 ./ 부터 경로를 작성하며 경로가 아예 없는것은 대부분 설치한 라이브러리이다.

아래의 예시 코드 참조

import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

 

* Router을 이용해서 페이지를 나누는 방법

• url 경로마다 다른 페이지를 보여주고 싶으면 아래의 예시 처럼 작성한다.

 (App.js)

import { Routes, Route, Link } from 'react-router-dom'

function App(){
  return (
    <Routes>
      <Route path="/detail" element={ <div>detail page render</div> } />
      <Route path="/about" element={ <div>about page render</div> } />
    </Routes>
  )
}

1. 상단에서 컴포넌트들을 import해준다.
2. <Routes>를 만들고 그 안에 <Route>를 작성한다.
3. <Route path="/url경로" element={ <div>render</div> }/> 이런식으로 작성한다.

<Route path="/" element={ <div>main page</div> } />

• 해당 url 경로는 메인페이지입니다.

* 메인페이지 접속시 상품을 보여주는 예시 코드

<Route path="/" element={ 
  <>
   <div className="main-bg"></div>
   <div className="container">
     <div className="row">
       { 
         shoes.map(data => {
           return <Card shoes={data.product} key={data.id}></Card>
        })}
      </div>
    </div> 
  </>
} />

 

---

* 페이지 이동 버튼 만들기

• 유저들이 링크를 타고 들어갈때 링크를 만들려면 react-router-dom에서 Link 컴포넌트 import 해오고 <Link>를 사용하면된다.
• 각각 url 경로로 이동하는 링크를 생성할 수 있다.
• https://v5.reactrouter.com/web/api/Link

<Link to="/">Home</Link>
<Link to="/detail">Detail page</Link>

* 페이지 이동시 데이터를 그대로 가져오는 방법

• state를 통해서 데이터를 다른 화면으로 보낼 수 있다.
• 아래의 예시 코드를 참조

<Link to="/" state={{ name: "Hyeonwoo" }}>

{coins.map((coin) => (
    <Coin key={coin.id}>
      <Link to={`/${coin.id}`} state={{ name: coin.name }}>
        <Img
          src={`https://coinicons-api.vercel.app/api/icon/${coin.symbol.toLowerCase()}`}
        />
        {coin.name} &rarr;
      </Link>
    </Coin>
))}

* 다른 화면으로 보낸뒤 받아보는 방법

• useLocation()을 이용한다.
• 아래의 사진처럼 location안에 객체 형태로 데이터가 담기게 되고 state안에 우리가 넘긴 데이터를 확인 할 수 있다.
• (참고) state를 받아오지 않고 바로 페이지로 접속하게 될 경우 error이 발생할 수 도 있다.
  • Link를 이용해 이동하지않고 url을 입력해 바로 이동시 error 발생
  • 해당 오류를 해결하기 위하여  optional chaining과 or연산자(||)를 이용한다.
• 우리가 데이터를 받아온뒤 페이지를 이동하면서 state를 만들기 때문이다.

import { useLocation } from "react-router-dom";

const Coin = () => {
  // const location = useLocation();
  const { state } = useLocation(); // 객체 디스트럭처링을 이용해 축약
  
  return (
    <Container>
      <Header>
        <Title>{ state?.name || "Loading..." }</Title>
      </Header>
      {loading ? <Loader>Loading...</Loader> : null}
    </Container>
  );
};

export default Coin;