react router not working on some pages on live site-CodePudding

my live site and my code

all my links would just fine on npm start but when I ran npm run build the routes for some pages stop working. /about doesn't work at all and if you are on the 404 page and navigate back the /projects page stops working as well.

CodePudding user response：

You should use BrowserRouter to wrap all your Routes in your Nav component and use Link to render About component as follows.

For more info: 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 [email protected]"
                >
                  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;

By the way, in your About component, use className instead of class as follows. Otherwise, it will give warnings.

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