[React] Router Link navigate 사용 방법

⚡️Router 설치 사용 방법

1. 터미널에 들어가서
2. npm install react-router-dom@6  설치한뒤
3. Router.js 파일을 생성하고

path = "경로"
element = {경로접근시 렌더링할컴포넌트}

import React from "react";
import Login from "./pages/Login/Login";
import Main from "./pages/Main/Main";
import { BrowserRouter, Routes, Route } from "react-router-dom";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/Main" element={<Main />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

  4. index.js 파일에 Router를 연결  

import React from "react";
import ReactDOM from "react-dom/client";
import Login from "./pages/Login/Login";
import Main from "./pages/Main/Main";
import Router from "./Router";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Router />);

---

⚡️Link 사용하는 방법

import { Link } from "react-router-dom";
const Login = () => { 
  return (
    <Button>
   	 <Link to="/Main"></Link> 
    </Button>
 )}

  

⚡️navigate 사용하는 방법

function Login(){
  let navigate = useNavigate() 
  return ( 
    <button onClick={()=>{ navigate('/Main') }}>이동버튼</button>
  )
}

1. navigate() 안에 숫자넣으면 앞으로가기, 뒤로가기 기능개발도 가능합니다.
2. (-1) 넣으면 뒤로 1번 가기
3. (2) 넣으면 앞으로 2번 가기