在Module.default (fleet.jsx:10:1) ./src/ access /route.jsx (route.jsx:15:1)初始化之前无法访问“fleet.jsx:10:1”

Question

从开始，打开一个带有上述错误的空白页面。我有一个导航栏，在这里我要路由单个列表，但是在运行服务器之后，它会打开到一个空白页面。这是控制台中的一个错误，它将我指向一个名为fleet的组件。但那边没有太多的密码。有一个导航栏，我提供了所有的链接，我相信问题不是从那里来的。

舰队代码

/** @format */

import React from "react";

class FleetPage extends React.Component {
  render() {
    return <h2>fleet</h2>;
  }
}
export default FleetPage;

app.js代码

import "./App.css";
import HomePage from "./components/pages/homePage";
import routes from "./configs/route";
import NavBar from "./components/navBar";
import { Routes, Route } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <HomePage />
      <NavBar />
      <Routes>
        {routes.map((route, index) => (
          <Route key={index} path={route.path} element={route.component} />
        ))}
      </Routes>
    </div>
  );
}

export default App;

路由代码

import HomePage from "../components/pages/homePage";
import ServicesPage from "../components/pages/services";
import FleetPage from "../components/pages/fleet";
import ContactPage from "../components/pages/contact";
import DriversDataPage from "../components/pages/driversData";

const routes = [
  {
    name: "Home",
    path: "/",
    component: <HomePage />,
  },
  {
    name: "Services",
    path: "/Services",
    component: <ServicesPage />,
  },
  {
    name: "Drivers-data",
    path: "/Drivers-data",
    component: <DriversDataPage />,
  },
  {
    name: "Fleet",
    path: "/fleet",
    component: <FleetPage />,
  },
  {
    name: "Contact",
    path: "/Contact",
    component: <ContactPage />,
  },
];

export default routes;

Answer 1

主react组件，即调用index.js的app.js文件，应该在browserRouter ()中使用browserRouter包装。在这种情况下，您必须删除strictMode包装器并使用browserRouter。安装react后，不要忘记将routerDom导入组件中