react router

sjy·2022년 7월 6일
0

리액트공부

목록 보기
7/9

ReactJS에서는 react-router-dom을 이용해 라우팅을 라우팅을 한다.

설치

명령어(npm install react-router-dom)로 라이브러리를 설치한 뒤 사용

사용 방법

src/index.js에서 BrowserRouter를 import해서 <App />을 감싸준다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

import 하고

import { Routes, Route, Link, useNavigate, Outlet } from "react-router-dom";
import DetailPage from './detail';

HTML의 a태그와 유사한 기능을 하지만 새로운 페이지로 이동은 하지 않는 Link(react는 SPA이기 때문)

<Link to="/detail">디테일페이지</Link>

useNavigate

useNavigate를 이용할 상수를 선언하는 방법으로도 원하는 url로 이동할 수 있다.

const navi = useNavigate();
const onClickDetail = ()=>{navi('/detail')}
<button onClick={onClickDetail}>go detail page</button>;

Routes, Route

페이지에서 보여줄 내용을 정해보자.
Routes로 감싸서 원하는 url과 보여줄 내용을 적는다.

<Routes>
        <Route
          path="/about"
          element={
            <div>
              about page
              <Outlet></Outlet>
            </div>
          }
        >
          <Route path="member" element={<div>member page</div>} />
        </Route>
        <Route path="/detail" element={<DetailPage />} />
</Routes>

메인(url)/detail 에 가면 <DetailPage/> 라는 컴포넌트를 보여준다.

nested routes

메인(url)/about 에 가면 about page 라는 텍스트를 보여준다.
메인(url)/about/member 에 가면 about page 라는 텍스트와 함께 member page라는 텍스트를 보여준다.
여기서 member page 텍스트를 보여주는 위치를 정해주는 것이 Outlet이다.
이처럼 상위 컴포넌트는 변함없이 계속 보여주고 하위 컴포넌트에만 변화를 주고싶을 때 사용하는 방법을 nested routes(중첩 라우팅) 라고 한다.

profile
수학과 코딩

0개의 댓글