反应路由器无法在实时站点的某些页面上工作
react router not working on some pages on live site
my live site and my code
我的所有链接在 npm start
上都很好,但是当我 运行 npm run build
时,某些页面的路由停止工作。 /about
根本不起作用,如果您在 404 页面上并向后导航,/projects
页面也会停止工作。
您应该使用 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>
my live site and my code
我的所有链接在 npm start
上都很好,但是当我 运行 npm run build
时,某些页面的路由停止工作。 /about
根本不起作用,如果您在 404 页面上并向后导航,/projects
页面也会停止工作。
您应该使用 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>