[ Vite + React ] Route, Routes 페이지 이동

 

Route를 활용하여 페이지 이동을 할 수 있다.

npm install react-router-dom

 

react-router-dom을 설치하여 Route와 Routes를 import

 

App.tsx ( 타입스크립트를 사용하기에 js 파일이 아닌 tsx확장자를 가진다.) 에 Route, Routes를 import

import React from 'react';
import { Route, Routes } from "react-router-dom";

 

이후 index 파일에서 <app/> 을 <BrowserRouter> 로 감싸주면 Rotue를 사용할 수 있다.

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

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
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();

---

Routes, Route

Routes 로 사용할 Route를 감싸준다.

Route에서는 path는 해당 경로로 접속시 element에 넣은 component를 화면에 보여준다.

import React from 'react';
import { Route, Routes } from "react-router-dom";
import './App.css';
import Main from "./Main";
import * as Pages from './page/Pages';


function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Main/>}>
            <Route path="" element={<Pages.Login.Login/>}/>
            <Route path="home" element={<Pages.Home.Home/> }/>
        </Route>
      </Routes>
    </div>
  );
}

 

Route안에 Route를 설정하면

불필요한 경로를 입력을 하지 않아도 된다.

path="/" 로 되어있는 route 안에 추가적으로 path를 넣어주면

/ 경로인 경우에는 Login 화면으로 경로가 설정되며

/home 경로는 home 화면으로 설정된다.

 

import {Outlet} from "react-router-dom";
import Header from "./component/header/Header";
import Footer from "./component/footer/Footer";
import './main.scss'

function Main() {
    return(
        <div className="default-padding">
            <Header/>
            <Outlet></Outlet>
            <Footer/>
        </div>)
}

export default Main;

default "/" 경로에 Main을 넣어 어느 페이지에서든지 header와 footer는 항상 나오도록 설정

이후 outlet을 활용하여 모든 컴포넌트는 outlet 영역에서 만들어지도록 한다.

 

> page들을 import할때 좀 더 관리를 하기 위해 Pages파일을 만들어 파일들을 하나로 묶어서 export를 진행

 

로그인 관련 component를 한번에 export하기 위해 Login.ts파일에서 login관련된 파일들을 모두 export 진행

Home 도 마찬가지로 home.ts파일에서 모두 export를 진행

export {default as Login} from './LoginMain';

 

이후 pages.ts파일에서 export한 모든 파일들을 전부 export 

export * as Login from "./login/Login";
export * as Home from "./home/Home";

 

마지막으로 App에 import하면

Pages.Login.Login 처럼 좀 더 구조를 갈끔하게 관리할 수 있다.

---

Navigator

useNavigate를 활용하여 버튼을 누르면 해당 페이지로 이동하도록 기능을 구현

간단하게 로그인 버튼을 만들어 onClick 이벤트에서 navigator를 사용하여 이동할 경로를 지정해준다.

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

function LoginMain() {
    const navigator = useNavigate()

    function handleLogin() {
        navigator('/home');
    }
    return(
        <>
            <div className="login-container">
                <button onClick={handleLogin}>
                    로그인
                </button>
            </div>
        </>
    )
}

export default LoginMain;

 

로그인 버튼을 누르면 home으로 이동되며 route에서 설정한 home 페이지로 이동하게 된다.

 

로그인 버튼을 누르면 홈 화면으로 이동이 되며

최종적으로 로그인 화면과 홈 화면에서 header와 footer는 그대로 남아있고 outlet으로 설정한 부분만 화면이 바뀌게 된다.

 

localhost:3000

localhost:3000/home