React Router + GH Pages，刷新应用

大佬教程收集整理的这篇文章主要介绍了React Router + GH Pages，刷新应用，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

开发过程中遇到React Router + GH Pages，刷新应用的问题如何解决？下面主要结合日常开发的经验，给出你关于React Router + GH Pages，刷新应用的解决方法建议，希望对你解决React Router + GH Pages，刷新应用有所启发或帮助；

这不会发生在我的本地服务器上， 但是当我将我的 create-react-app 推送到 gh-pages 并尝试重新加载除主页之外的任何内容，或直接导航到路由页面时，分页符和 URL 反复增长，看起来像这样...... @R_675_10107@s://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;

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

该网站是 @R_675_10107@s://www.Hellocentral.live

任何帮助将不胜感激！

解决方法

@H_874_20@

您需要将 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。可能 @H_695_3@memoryRouter 或 StaticRouter 确实有效，但我不确定。

,

由于您的域是 @R_675_10107@s://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。