Router 컴포넌트 오류

//Main.js

import PostTitle from '../Component/PostTitle';

const Main = () => {
  return (
    <div className='Main'>
      {POSTS.map((post, i) => {
        return <PostTitle post={post} key={i} />;
      })}
      <div>뭐지</div>
    </div>
  );
};

export default Main;

const POSTS = [
  {
    id: 0,
    title: '축하한다 연진아!',
  },
  {
    id: 1,
    title: '축하한다 수진아!',
  },
  {
    id: 2,
    title: '축하한다 성준아!',
  },
];

//PostTitle.js

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

const PostTitle = ({ post }) => {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/detail');
  };

  return <div onClick={handleClick}>{post.title}</div>;
};

export default PostTitle;

이렇게 코드를 쳤는데, 계속 오류화면이 뜨거나 빈화면이 나왔다.
알고보니, 정말 사소한 실수였다.
index.js에서 Router 컴포넌트가 아닌 Main 컴포넌트를 import 하고 있었다는 사실!

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Main from './Pages/Main';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Main />
  </React.StrictMode>
);

초보적인 실수였지만,
index.js 파일에서 <Router />를 렌더링하는 이유는 React Router를 애플리케이션의 라우팅 시스템으로 사용하기 위해서라는 사실 한번 더 집고 넘어가자!

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './Router';

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