리액트 라우터 세팅하기

사이트 구성에 메뉴1, 메뉴2, 메뉴3 등등등.. 이 나누어져 있다면

일반 html/css/js를 사용하는 사이트는 html파일을 여러개 만들어 링크를 건다.

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

리액트에서 저런식의 여러 페이지를 직접 코드 작성하려면 불편하니 라우터 라이브러리로 구현하는게 대부분이다.

 

 

 

1.

터미널 열어서 npm instal react-router-dom@6을 입력한다.

 

 

 

 

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

2.

index.js 파일을 열어서  import { BrowserRouter } from 'react-router-dom'; 써주고

<App />을 <BrowserRouter>로 감싸준다.

그러면 사용할 준비는 끝!

 

 

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

function App(){
  return (
    <Routes>
      <Route path="/menu1" element={ <div>menu1에서 보여줄것</div> } />
      <Route path="/menu2" element={ <div>menu2에서 보여줄것</div> } />
    </Routes>
  )
}

3.

App.js로 돌아와서 상단에  import { Routes, Route, Link } from 'react-router-dom'  를 작성한다.

다음 코드에 보이는것과 같이 <Routes>안에 <Route>를 만들어 menu1.js와 menu2.js에 보여줄 내용을 작성한다.

 

 

<Link to="/">home</Link>
<Link to="/menu1">menu1</Link>
<Link to="/menu2">menu2</Link>

4.

이동 버튼은 <Link>로 만든다. ( "/"는 메인페이지로 이동)