3. navigate로 다른 페이지 이동

 

최종 결과물

새로운 파일 생성

1. src 카테고리 안에 'pages'라는 폴더 생성 후 js파일 생성(home.js)(나중에 page.js도 만들거니 미리 만들어 두는 게 좋을 듯)

src-pages-home.js

2. home.js 기본 설정

export default function Home(){
    return(
        <>
        
        </>
    )
}

---

Router

1. 터미널에 npm install react-router-dom

2. <BrowserRouter>태그로 <App/>를 감싼다.

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

index.js

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

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

4. pages폴더에 page 파일을 하나 더 만든다

5.home.js, page.js, App.js를 Route 한다. -> 메인 홈에 연결하는 것.

App.js

import { Routes, Route } from "react-router-dom";
import Home from './pages/home';
import Page from './pages/page';

export default function App(){
  return(
    <>
      <div>Hello world</div>
      <Routes>
        <Route path={'/'} element={<Home/>}></Route>
        <Route path={'/home'} element={<Home/>}></Route>
        <Route path={'/page'} element={<Page/>}></Route>
      </Routes>
    </>
  )
}

• <Routes><Route></Route></Routes>
• path={'경로'} element={<Component />}

---

navigate + button을 이용한 페이지 이동

1. button 만들기

page.js

export default function Page(){

    return(
        <>
        <div>page page</div>
        <button className={'w-32 h-10 bg-red-500'} 
        >홈으로 이동</button> 
        </>
    )
}

결과물

2. navigate 변수 생성, useNavigate import

useNavigate는 양식이 제출되거나 특정 event가 발생할 때,  url을 조작할 수 있는 interface를 제공

• let navigate = useNavigate();
• import {useNavigate} from "react-router-dom"
• button 태그 안에 onClick={()=>{navigate("경로")}} //버튼을 클릭했을 때 경로로 가라.

page.js

최종 완성 결과물