React-Router页面不渲染问题：Bootstrap导航栏配置后URL变但页面无显示

我帮你梳理了代码里的问题，核心是把React-Router的路由路径和本地文件路径搞混了，这才导致URL变了但页面不渲染。具体问题和修复方案如下：

问题点分析 #

• Link的to属性用错了：你写的to="../pages/home.jsx"是本地文件的相对路径，但React-Router需要的是前端路由的地址（比如/home），不是文件的实际存放路径。
• Route的path属性用错了：同样，"./pages/home.jsx"是文件路径，而路由的path应该是浏览器地址栏里的URL路径，和文件结构无关。
• 小细节：导航栏里的品牌文本应该用navbar-brand类（Bootstrap的规范类），而不是nav-link，这样样式会更符合预期。

修正后的完整代码 #

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="navbar-brand" to="/home"> Graphic-Lab </Link>
        {/* 补充完整的导航项示例 */}
        <div className="navbar-nav">
          <Link className="nav-link" to="/home">Home</Link>
          <Link className="nav-link" to="/aboutus">About Us</Link>
          <Link className="nav-link" to="/services">Services</Link>
          <Link className="nav-link" to="/privacy-policy">Privacy Policy</Link>
        </div>
      </nav>
      {/* 修正Route的path为前端路由路径 */}
      <Switch>
        <Route exact path="/home">
          <Home />
        </Route>
        <Route path="/aboutus">
          <Aboutus />
        </Route>
        <Route path="/services">
          <Services />
        </Route>
        <Route path="/privacy-policy">
          <PrivacyPolicy />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

关键说明 #

React-Router是前端路由系统，它的路径是浏览器地址栏中显示的URL路径（比如http://localhost:3000/home），和你的项目文件结构没有直接关系。文件的导入已经通过顶部的import Home from "./pages/home";完成，Route的作用只是把URL路径和对应的组件绑定起来——当用户访问/home时，就渲染Home组件。

内容的提问来源于stack exchange，提问作者boomeran