重定向时在GitHub页面中获取404

Question

我正在尝试学习如何在基本的React项目中使用GitHub Pages。但我对项目的不同页面的URL有问题(比如/home/about…(

我在这里有一个GH页面：https://naacho20.github.io/itis/如果你尝试使用导航栏，会出现404，但这是错误的，因为我有一个路由器重定向它。我展示我的代码，以便更好地解释：

App.js:

import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import { BrowserRouter, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./pages/Home";
import About from "./pages/About";
import Portfolio from "./pages/Portfolio";
import Contact from "./pages/Contact";
export default function App() {
return (
<div>
<BrowserRouter>
<Navbar />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/portfolio" component={Portfolio} />
<Route path="/contact" component={Contact} />
</BrowserRouter>
</div>
);
}

联系人.js

import React from "react";
export default function Contact() {
return <div>Contact</div>;
}

Navbar.js

import React from "react";
import { withRouter } from "react-router-dom";
import { Navbar, Nav } from "react-bootstrap";
const menuItems = [
{
to: "/",
title: "Inicio",
},
{
to: "/about",
title: "Sobre mí",
},
{
to: "/portfolio",
title: "Portfolio",
},
{
to: "/contact",
title: "Contacto",
},
];
class NavBar extends React.Component {
getNavLinkClass = (path) => {
return this.props.location.pathname === path ? "active" : "";
};
render() {
return (
<div>
<Navbar bg="dark" expand="lg" variant="dark">
<Navbar.Brand href="/">IT.IS</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
{menuItems.map((item, index) => {
return (
<Nav.Link
key={index}
className={this.getNavLinkClass(item.to)}
href={item.to}
>
{item.title}
</Nav.Link>
);
})}
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);
}
}
NavBar = withRouter(NavBar);
export default NavBar;

所以我从URL中看到了这个问题，我看到当我启动应用程序时，它会转到localhost:3000/itis，主页不会呈现，但如果我删除itis(localhost:3000/(，它会呈现主页。我不知道我做错了什么，有什么建议吗？

Ty。

Answer 1

这是因为您正在使用SPA应用程序，所以您的所有路由都来自一个html文件。你应该使用HashRouter来修复它。它很简单，你应该导入HashRouter而不是浏览器路由器

import { BrowserRouter} from "react-router-dom";

至

import { HashRouter } from "react-router-dom"; 

并用你的应用包装

此外，你必须用像这样的Switch包裹你的路线

<BrowserRouter> 
<Switch> 
<Navbar /> 
<Route exact path="/" component={Home} /> 
<Route path="/about" component={About} /> 
<Route path="/portfolio" component={Portfolio} /> 
<Route path="/contact" component={Contact} /> 
</Switch> 
</BrowserRouter>