route

페이지 이동할 때 사용하는 라이브러리 

a태그를 사용하면 새로고침이 되기 때문에 Link를 사용함.

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(

  <BrowserRouter> {/** BrowserRouter로 감싸기  */}

      <App />

  </BrowserRouter>

);

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

 

 

 

import React from 'react';

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

import HomePage from './HomePage';

import LoginPage from './LoginPage';

const RouteHomePage = () => {

  return (

    <Routes>

      <Route path="/" exact={true} element={<HomePage/>} /> {/** 화면에서 객체를 바꿔치기 해주는 것. */}

      <Route path="/login/:id" exact={true} element={<LoginPage/>} />

    </Routes>      

  );

};

export default RouteHomePage;

 

 

 

          <ul>

            <li>

              {/* <a href="/">홈</a>  // a태그를 쓰게되면 비동기 식이 아닌 페이지를 전체 새로고침하기 때문에 사용하지 않음. */}

              <StyledLoginLink to="/">홈</StyledLoginLink> {/** 그렇기 때문에 Link를 사용함, NavLink 태그도 있음. */}

            </li>

            <li>

              <Link to="/login/10">로그인</Link>

            </li>

          </ul>