时间戳

首页 > 解决方案 > 反应路由器在实时站点上的某些页面上不起作用

reactjs - 反应路由器在实时站点上的某些页面上不起作用

问题描述

我的实时网站和我的代码

我的所有链接都可以正常运行，npm start但是当我运行npm run build某些页面的路线时，它们会停止工作。/about根本不起作用，如果您在 404 页面上并向后导航，该/projects页面也会停止工作。

标签： reactjsnpmnpm-start

解决方案

您应该使用将所有组件BrowserRouter包装Routes在组件中，并按如下方式渲染组件。NavLinkAbout

欲了解更多信息：https ://reactrouter.com/web/guides/quick-start

import "./nav.css";
import {
  BrowserRouter as Router,
  Route,
  Link,
  Redirect,
} from "react-router-dom";
import LogoS from "../imgs/logo-sm.png";
import Logo1 from "../imgs/logo-01.png";
import Projects from "./project-list";
import Aub from "./projects/auburn";
import M3d from "./projects/m3d";
import Uroute from "./projects/uroute";
import Thesis from "./projects/thesis";
import About from "./about";
import ACNH from "./projects/acnh";

const Nav = () => {
  return (
    <Router>
      <div>
        <header className="navbar">
          <div className="container">
            <Link to="/projects">
              <p className="mb-0 navbar-brand">
                <img
                  alt="Trisha Dring"
                  className="image logo d-sm-none"
                  src={LogoS}
                />
                <img
                  className="image logo d-none d-sm-block"
                  alt="Trisha Dring"
                  src={Logo1}
                />
              </p>
            </Link>
            <ul className="nav">
              <li className="nav-item">
                <Link
                  to="/about"
                  className="nav-link active"
                  aria-current="page"
                >
                  About
                </Link>
              </li>
              <li className="nav-item">
                <a className="nav-link" href="/">
                  Resume
                </a>
              </li>
              <li className="nav-item">
                <a
                  className="nav-link"
                  href="mailto:trisha.dring+website@gmail.com"
                >
                  Contact
                </a>
              </li>
            </ul>
          </div>
        </header>
        <Route path="/projects" component={Projects} />
        <Route path="/ACNH" component={ACNH} />
        <Route path="/Auburn" component={Aub} />
        <Route path="/about" component={About} />
        <Route path="/M3D" component={M3d} />
        <Route path="/Uroute" component={Uroute} />
        <Route path="/FixHFA" component={Thesis} />
        <Route exact path="/">
          <Redirect to="/projects" />
        </Route>
      </div>
    </Router>
  );
};

export default Nav;

顺便说一句，在您的About组件中，使用className而不是class如下。否则，它会给出警告。

<p className="explain">Hi. I'm Trisha</p>

推荐阅读