react router dom

/detail 로 접속하면 상세페이지를,

/cart 로 접속하면 장바구니 페이지를 보여주자.

 

 

1. React에서 페이지를 나누는 방법

1. 컴포넌트를 만들어서 상세페이지 내용을 만든다.

2. /detail 로 접속하면 그 컴포넌트를 보여준다.

3. React-router-dom 라이브러리로 쉽게 구현할 수 있다.

 

 

2. React-router-dom 설치

https://v5.reactrouter.com/web/guides/quick-start

해당 사이트에서 제공하는 문서를 보고 설치하자.

찾기가 어렵다

npm install react-router-dom
npm install react-router-dom@6

 

 

3. 셋팅하기

src/index.js 파일로 가서 <BrowserRouter> 로 <App />을 감싸면 된다.

// src/index.js

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

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

 

 

4. react-router-dom 사용법

4-1. 라우터로 페이지 나누는 법

• 상단에 여러가지 컴포넌트를 import 한다.
• <Routes> 만들고 그 안에 <Route>를 작성한다.
• <Route path="/경로" element={<Component />} /> 작성

// App.js

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

function App(){
    return (
        (생략)
        <Routes>
            <Route path="/" element={ <div>메인페이지임</div> } />
            <Route path="/detail" element={ <div>상세페이지임</div> } />
            <Route path="/about" element={ <div>어바웃페이지임</div> } />
        </Routes>
    )
}

 

 

4-2. 페이지 이동, Link

• 상단에 Link 컴포넌트를 import한다.
• 원하는곳에 Link를 쓴다.

<Link to="/">홈</Link>
<Link to="/detail">상세페이지</Link>

 

 

4-3. 페이지 이동, useNavigate()

useNavigate()를 쓰면 그 자리에 유용한 함수가 남는다. 페이지를 이동시켜주는 함수다.

navigate("/detail") : /detail 페이지로 이동

navigate(-1) : 뒤로 1번

navigate(2) : 앞으로 2번

// App.js
import { useNavigate } from 'react-router-dom'

function App(){
    let navigate = useNavigate()

    return (
        (생략)
        <button onClick={()=>{ navigate('/detail') }}>이동버튼</button>
    )
}

 

 

4-4. 404 페이지 설정

없는 경로로 접속했을 때 404 페이지 보여주는 방법은

Route path에 * (모든경로)를 넣어준다.

<Route path="*" element={ <div>404</div> } />

 

 

4-5. 서브경로를 만들 수 있는 Nested routes / Outlet

/about/member 로 접속하면 회사 멤버 소개하는 페이지

/about/locaion 으로 접속하면 회사 위치 소개하는 페이지를 띄우는 법

<Route path="/about/member" element={ <div>멤버들</div> } />
<Route path="/about/location" element={ <div>회사위치</div> } />

이렇게 만들어도 되지만

 

<Route path="/about" element={ <About/> } >  
    <Route path="member" element={ <Members /> } />
    <Route path="location" element={ <Location /> } />
</Route>

이렇게 만들어도 된다.

 

<Route> 안에 <Route>를 넣을 수 있는데 이것을 Nested routes 라고 한다.

이렇게 사용하면

/about/member 로 접속 시 <About />과 <Members />을 보여준다.

/about/location 으로 접속 시 <About />과 <Location />를 보여준다.

 

About Component 안에 element 들은 Outlet 컴포넌트 안에 보여진다.

function About () {
    return (
        <div>
            <h4>about</h4>
            <Outlet />	// 이 자리에 Members or Location이 표시된다.
        </div>
    )
}

 

 

 

?