React Router V6 不顯示頁面？

Question

我正在嘗試使用反應路由器 v6。 但是，當嘗試下面的這些路線時，它只會顯示一個空白頁面。 可能是什么問題呢？

應用程序.js

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './components/home';

function App() {
  return <BrowserRouter>
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/hi' element={<div>hi</div>} />
      <Route path='/bye' element={<div>bye</div>} />
    </Routes>
  </BrowserRouter>

}

export default App;

主頁.jsx

import React from "react";

export default function Home(){
    return <h1>Home</h1>
}

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";


ReactDOM.render(
  <App />, document.getElementById('root'))

Answer 1

有用。 檢查您的庫或重新安裝包（npm install）。

刪除 package.lock 文件和 node_modules 后

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
// import Home from "./home";

function Home() {
  return <h1>Home</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/hi" element={<div>hi</div>} />
        <Route path="/bye" element={<div>bye</div>} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;