我无法使用 BrowserRouter 在 React 中显示 pages/components

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

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

<Route>
    <Home/>
</Route>

Answer 2

试试这个方法

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

我无法使用 BrowserRouter 在 React 中显示 pages/components

I am not able to display the pages/components in React using BrowserRouter

javascript

node.js

npm

reactjs

npx