[1] ReactRouter 설정

[1] 함수 컴포넌트 자동 생성 단축키: vscode - rafce

[2] url을 통해 화면을 바꿔보자

동작: localhost:3000 에는 MainPage 글씨 출력, localhost:3000/about에는 AboutPage 글씨 출력

import React from 'react';
function AboutPage(props){
  return (
        <div className={'text-3xl'}>
        	AboutPage
        </div>
  );
}
export default AboutPage;

import { Suspense, lazy } from 'react';
import {createBrowserRouter} from "react-router-dom";
const Loading = <div className={'bg-red-600'}> Loading...</div>;
const Main = lazy(() => import("../pages/MainPage"));
const About = lazy(() => import("../pages/AboutPage"));

const root = createBrowserRouter([
  {
    path: "/",
    element: <Suspense fallback={Loading}><Main/></Suspense>
  },
  {
    path:"about",
    element: <Suspense fallback={Loading}><About/></Suspense>
  }
]);
export default root;

[3] localhost:3000 에서 'About로 이동' 글씨를 클릭해서 localhost:3000/about로 이동하자

import React from 'react';
function MainPage(props){
  return(
        <div className={'text-3xl'}>
          <div className={'flex'}>
            <Link to ={'/about'}> About로 이동</Link>
          </div>
          <div>Main Page</div>
        </div>
  );
}
export default MainPage;