개발일지

React Router 본문

React

React Router

kosssshhhh 2023. 2. 17. 20:37

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

 

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

 

따라서 사용자가 페이지 요청하면 내부에 있는 <div> 를 갈아치워서 보여주어야한다. 

 

하지만 직접 코드 짜는 것은 비효율적이므로 react-router-dom 이라는 외부 라이브러리를 설치해서 구현하는 것이 일반적이다. 

 

 

 

react-router-dom 설치

터미널에 npm install react-router-dom@6 입력하여 설치

 

 

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

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

세팅은 index.js 에서 import 한 후, <BrowserRouter> 로 <App/> 감싸주면 된다.

 

 

 

라우터로 페이지 나누기

웹사이트들을 보면

kosssshhhh.com/~~ 접속하면 1번 페이지를 보여주고

kosssshhhh.com/~~ 접속하면 2번 페이지를 보여준다. 

 

url 경로마다 다른 페이지를 보여주고싶을 때 아래와같이 작성

 

(App.js)

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

function App(){
  return (
    (생략)
    <Routes>
      <Route path="/detail" element={ <div>페이지1</div> } />
      <Route path="/about" element={ <div>페이지2</div> } />
    </Routes>
  )
}

1. 상단에 사용할 컴포넌트 import 후

2. <Routes> 만들고 그 안에 <Route /> 작성

3. <Route path="url경로"  element={<html>}  작성해준다.

 

 

 

유저들은 url 을 입력해서 들어가는 것보다 링크 눌러서 들어가는 경우가 많다. 

링크 만들고 싶으면 react-router-dom 에서 Link 컴포넌트 import 한 후, 원하는 곳에서 <Link>. 사용하면 된다. 

<Link to="/">Home</Link>
<Link to="/detail">detail</Link>
저작자표시

'React' 카테고리의 다른 글

Lifecycle 과 useEffect  (0) 2023.02.26
React Router (navigate, nested routes, outlet), useParams  (0) 2023.02.25
export / import  (0) 2023.02.17
React 이미지 파일 사용하기  (0) 2023.02.17
Class 이용하여 컴포넌트 생성하기  (0) 2023.02.17
'React' Related Articles more