[Web Project #2] React Routing

오늘은 일단 메인 페이지에 회원가입 페이지로 가는 링크를 생성해 이동을 시켜보려 한다.

pm install react-router-dom@6

(react-router-dom 뒤에 붙는 @6는 버전이라고 함)

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './RegisterPage.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App></App>
  </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();

index.js 는 react로 만든 웹페이지에 처음으로 접속하면 실행되는 코드다.
(어제 회원가입 페이지를 먼저 만드려고 App 부분을 RegiterPage 로 바꿔놨더니 코드를 아무리 작성해도 회원가입 페이지만 떴었다..ㅎ)

css 파일들은 여기서 중요하지 않으니까 생략하겠다.

App.js

import './App.css';
import { Routes, Route, BrowserRouter } from "react-router-dom";
import RegisterPage from './RegisterPage';
import HomePage from './HomePage';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 홈화면 */}
        <Route path='/' element={<HomePage />} />
        {/* 회원가입 */}
        <Route path='/join' element={<RegisterPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

import RegisterPage from './RegisterPage';
import HomePage from './HomePage';

import 명령어를 통해 사용할 js 파일들을 불러오고

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

이 구문에서 라우팅에서 사용될 함수(?)들을 import 시켰다.

그리고 app 함수 내 형식처럼 연결할 파일들을 라우팅 시켜주면 된다.

<Route path='패스이름' element={<연결할 js 코드 />} />

HomePage.js

import './HomePage.css';
import { Link } from 'react-router-dom';

function HomePage() {
    return (
        <Link to ='/join'>Join</Link>
    );
}

export default HomePage;

일단 메인 페이지에는 간단하게 회원가입 페이지로 가는 링크만 추가를 해봤다.

a 태그를 사용하지 않고 link 태그를 사용한 이유는 a태그와 달리 link는 페이지 갱신없이 바로 이동을 해준다고해서 사용했다.

참고 링크:
https://han-py.tistory.com/445