React-Router不渲染页面

Question

我从bootstrap获取了一个导航栏模板，并尝试配置react- router，url发生了变化，但页面没有呈现，我不确定这是否与我的导航栏或路由器有关

import React from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.css";

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from "./pages/home";
import Aboutus from "./pages/Aboutus";
import Services from "./pages/services";
import PrivacyPolicy from "./pages/PrivacyPolicy";

function App() {
  return (
    <Router>
      <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <Link className="nav-link" to="../pages/home.jsx">
          Graphic-Lab
        </Link>
          </ul>
      </nav>

      <Switch>
        <Route exact path="./pages/home.jsx">
          <Home />
        </Route>
        <Route path="./pages/Aboutus.jsx">
          <Aboutus />
        </Route>
      </Switch>
    </Router>
  );
}
export default App;

Answer 1

Route的属性path要求浏览器URL匹配。不是要显示的文件的路径。

所以它必须是这样的：

<Route path="/something">
    <MyCoolComponent/>
</Route>

它像https://example.com/something一样为URL呈现MyCoolComponent。

您可以在documentation上阅读path定义并查看一些示例。

Answer 2

不需要使用文件扩展名，因为您创建了SAP，当您在不同的路径上呈现不同的HTML页面时需要文件扩展名，但在React中，您只需使用JS模拟页面。只需使用path="/home"和path="/about"即可。