我无法使用BrowserRouter在React中显示页面/组件

Question

这是我的App.js和Home.js代码我想在浏览器上显示Home.js。

App.js

import "./App.css";
import { Route, BrowserRouter } from "react-router-dom";
import Home from "./pages/Home";
function App() {
return (
<div className="App">
<BrowserRouter>
<Route path="/" exact component={Home} />
</BrowserRouter>
</div>
);
}
export default App;

Home.js

import React from "react";
function Home() {
return (
<div>
<h1>Home</h1>
</div>
);
}
export default Home;

索引文件如下index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
reportWebVitals();

所以我想在浏览器上显示它，但我无法

Answer 1

尝试这种方式

<BrowserRouter>
<Routes>
<Route path="/" element={<Home />}></Route>
</Routes>
</BrowserRouter>

Answer 2

Home组件不应该是子组件而不是道具吗？我的意思是：

<Route>
<Home/>
</Route>