/, /new, /diary 관련 질문

home으로 들어가서 보이는 화면에는 Home이라고 잘 보이는데

주소뒤에 /new나 /diary를 붙여서 검색해봐도 계속 Home으로 고정되어있습니다

코드는 밑에와 같은 방식으로 작성하였습니다.

import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { BrowserRouter } from 'react-router-dom';

createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
    </BrowserRouter>
  
)

const Diary=()=>{
    return <div>Diary</div>;
};

export default Diary;

import './App.css'
import {Routes,Route} from "react-router-dom";
import Home from './pages/Home';
import Diary from './pages/Home';
import New from './pages/Home';




// 1. "/" : 모든 일기를 조회하는 Home 페이지
// 2. "/new" : 새로운 일기를 작성하는 New 페이지
// 3. "/diary" : 일기를 상세히 조회하는 Diary 페이지
function App() {

  return <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/new" element={<New />} />
    <Route path="/diary" element={<Diary />} />
  </Routes>;
}

export default App