React Router + GH Pages，刷新应用

如何解决React Router + GH Pages，刷新应用

这不会发生在我的本地服务器上，但是当我将我的 create-react-app 推送到 gh-pages 并尝试重新加载除主页之外的任何内容，或直接导航到路由页面时，分页符和 URL 反复增长，看起来像这样...... https://hellocentral.live/about/?p=/&q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/....

这是我的路线文件...

import React from "react";
import "./SiteContainer.scss";
import HeaderContainer from "../HeaderContainer/HeaderContainer";
import { Route,Switch } from "react-router-dom";
import About from "../About/About";
import Home from "../Home/Home";
import Music from "../Music/Music";
import Footer from "../Footer/Footer";
import Merch from "../Merch/Merch";
import Pics from "../Pics/Pics";
import Contact from "../Contact/Contact";

export const SiteContainer = () => {
  return (
    <div className="site-container">
      <HeaderContainer />
      <Switch>
        <Route path="/about" component={About} />
        <Route path="/merch" component={Merch} />
        <Route path="/music" component={Music} />
        <Route path="/pics" component={Pics} />
        <Route path="/contact" component={Contact} />
        <Route path="/" component={Home} />
      </Switch>
      <Footer />
    </div>
  );
};

export default SiteContainer;

这是我的仓库 https://github.com/monstaro/hc3/tree/master/src

该网站是 https://www.hellocentral.live

任何帮助将不胜感激！

解决方法

您需要将 Switch 组件包装在 Router 组件中。为此，您需要从 react-router-dom 包中导入它：

import { HashRouter as Router } from 'react-router-dom'
...
<Router basename={process.env.PUBLIC_URL}>
    <Switch>
    ...
    </Switch>
</Router>

我以 HashRouter 为例，因为 GH Pages 不支持其他路由器 BrowserRouter。可能 MemoryRouter 或 StaticRouter 确实有效，但我不确定。

由于您的域是 https://www.hellocentral.live，因此您需要将 segmentCount 设置为 0 here。

猜猜您使用的是博客或其他内容中引用的旧版 rafgraph/spa-github-pages。我建议使用 the latest version of the script 更新 index.html，使用 this 脚本更新 404.html。

来自docs，

请注意，如果您正在设置 Project Pages 站点而不使用自定义域（即您站点的地址是 username.github.io/repo-name），那么您需要将 pathSegmentsToKeep 设置为 1 in 404.html 文件，以便在重定向后的路径中保留 /repo-name。