反应路由器不显示组件数据

Question

App.js代码

import "./App.css";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Header from "./component/layout/Header/Header.js";
import Footer from "./component/layout/Footer/Footer.js";
import WebFont from "webfontloader";
import React from "react";
import Home from "./component/Home/Home.js";

function App() {
  React.useEffect(() => {
    WebFont.load({
      google: {
        families: ["Roboto", "Droid Sans", "Chilanka"],
      },
    });
  }, []);

  return (
    <Router>
      <Header />
      <Routes>
        <Route exact path="/" component={Home} />
      </Routes>
      <Footer />
    </Router>
  );
}

export default App;

################################### Home.js代码

import React from "react";
import { CgMouse } from "react-icons/all";
import "./Home.css";

const Home = () => {
  return (
    <>
      <div className="banner">
        <p>Welcome to Ecommerce</p>
        <h1>FIND AMAZING PRODUCTS BELOW</h1>

        <a href="#container">
          <button>
            Scroll <CgMouse />
          </button>
        </a>
      </div>

      <h2 className="homeHeading">Featured Products</h2>

      <div className="container" id="container"></div>
    </>
  );
};

export default Home;

我可以看到页眉和页脚内容...但看不到主页组件内容。

我在此处附上 URL 我的代码的屏幕截图以获取详细信息

http://otologynew.asteamwork.com/wp-content/themes/asgola/images/Screenshot_2.png

http://otologynew.asteamwork.com/wp-content/themes/asgola/images/Screenshot_3.png

http://otologynew.asteamwork.com/wp-content/themes/asgola/images/Screenshot_4.png

http://otologynew.asteamwork.com/wp-content/themes/asgola/images/Screenshot_5.png

Answer 1

您使用的是 React Router v6，所以它应该是这样的：

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

这里的 release/tutorial 文档中有示例：https://reactrouter.com/docs/en/v6/getting-started/tutorial

反应路由器不显示组件数据

React router not displaying component data

reactjs

mern