[React] React Router 사용하기

GOAL

React를 사용하여 <Navbar/> 컴포넌트의 <li> 태그를 클릭했을 때 Login.jsx로 이동하도록 설정하기

=> React Router 사용

=> 라우팅을 설정하여 <li> 클릭 시 Login.jsx 컴포넌트를 렌더링하기

1. React Router 설치

npm install react-router-dom

2. 라우터 설정

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

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

// app.js
import React from 'react';
import Navbar from './components/Navbar'
import AppRoutes from './routes/routes'

function App() {
  return (
    <div className="App">
      <Navbar/>
      <AppRoutes/>
    </div>
  );
}

export default App;

// routes.js
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import StartMenu from '../components/StartMenu';
import Login from '../components/Auth/Login';

const AppRoutes = () => {
    return (
        <Routes>
            <Route path="/" element={<StartMenu />} />
            <Route path="/login" element={<Login />} />
        </Routes>
    );
};

export default AppRoutes;

// StartMenu.jsx
import React from 'react';

function StartMenu() {
  return (
    <div>
      <h1>StartMenu Page</h1>
    </div>
  );
}

export default StartMenu;

3. <Navbar/> 컴포넌트 수정

<Navbar/> 컴포넌트에서 <li> 태그를 클릭할 때 login 경로로 이동하도록 설정

import React from 'react';
import { useNavigate } from 'react-router-dom';
import '../styles/Navbar.css'

const Navbar = () => {
    const navigate = useNavigate();

    const moveToLogin = () => {
        navigate('/login');
    };

    return (
        <div className='nav'>
            <ul className="nav-menu">
                <li className="nav-login" onClick={moveToLogin}>로그인</li>
            </ul>
        </div>
    );
};

export default Navbar;

4. Login.jsx 작성

Login.jsx를 작성하여 <li> 클릭 시 열리는 페이지의 내용을 정의

// login.jsx
import React from 'react';

function Login() {
  return (
    <div>
      <h1>Login Page</h1>
    </div>
  );
}

export default Login;