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

Question

my live site 和 my code

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

Answer 1

您应该使用BrowserRouter 将所有Routes 包装在您的Nav 组件中，并使用Link 来呈现About 组件，如下所示。

欲了解更多信息：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>