Javascript 路由未调用组件 从“React”导入React； 从“/components/Navbar/Navbar.component”导入导航栏； 从“/pages/HomePage/HomePage.component”导入主页； 从“/components/Footer/Footer.component”导入页脚； 从“/pages/BlogPage/BlogPage.component”导入BlogPage； 从“react router dom”导入{Route，Switch，BrowserRouter}； 函数App（）{ 返回( ); } 导出默认应用程序；

当我运行应用程序时，home组件加载没有任何问题，但它只加载

Navbar

和

Footer

组件，显然我做错了什么，但我还没有弄清楚是什么。

您在

路由中使用的路径是您在浏览器url中看到的路径。你不需要在路径前面有点，所以

替换

import React from "react";
import Navbar from "./components/Navbar/navbar.component";
import HomePage from "./pages/homePage/HomePage.component";
import Footer from "./components/Footer/footer.component";
import BlogPage from "./pages/blogPage/BlogPage.component";
import { Route, Switch, BrowserRouter } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar />
        <Switch>
          <Route exact path="./BlogPage" component={BlogPage} />
          <Route exact path="./" component={HomePage} />
        </Switch>
        <Footer />
      </BrowserRouter>
    </div>
  );
}

export default App;



由此

<Route exact path="./BlogPage" component={BlogPage} />
<Route exact path="./" component={HomePage} />


从每条路线中取出“.”。它不允许路径与URL匹配。React路由器不使用相对路径。
<Route exact path="/BlogPage" component={BlogPage} />
 <Route exact path="/" component={HomePage} />