React-router-dom + Suspense：gh-pages 部署中的问题

Posted 2023-02-21

【中文标题】React-router-dom + Suspense：gh-pages 部署中的问题

【英文标题】：React-router-dom + Suspense : Problem in gh-pages deployment

【发布时间】：2021-10-18 00:09:01

【问题描述】：

我正在开发一个 React 应用程序，它使用 react-router-dom 与 React.lazy() 和 Suspense 进行代码路由-分裂。

这是每个人都遇到的相同的 gh-pages 出现 404 错误问题，当我在此之前遇到它时，将 basename 属性添加到 BrowserRouter 组件就可以了。但是，即使添加了 basename 属性，如果我去某个路由并刷新，也会出现 404 页面。另外，如果我直接通过浏览器访问路由，404 又会出现。

我的当前解决方法 是使用 HashRouter 而不是 BrowserRouter，它不会让应用程序在生产中中断。但是，它会将哈希值放入路由中。有没有人让 BrowserRouter 在 gh-pages 或任何其他部署服务上的部署中与 Suspense 一起使用？欢迎提出更好的应用部署选项建议。

这是我在代码中的路线和一个说明问题的示例：

import React, Suspense from "react";
import  BrowserRouter as Router, Route, Switch  from "react-router-dom";
import Fallback from "./components/Fallback"

const Carousel = React.lazy(()=>import("./components/carousel/Carousel"))
const Home = React.lazy(()=>import("./components/Home"))

function App() 
  return (
    <div className="App">
      <Router basename="/home">
        <Suspense fallback=Fallback()>
          <Switch>
            <Route exact path="/" component=Home />
            <Route path="/carousel" component=Carousel />
          </Switch>
        </Suspense>
      </Router>
    </div>
  );

在这里，如果我访问已部署的站点（例如 URL：.github.io/home），我会在 / 处看到主页。现在，如果一个链接将我带到 /carousel 路线，我可以看到轮播页面，但如果我刷新，就会出现 404 页面。另外，如果我直接访问 /carousel，则再次出现 404 页面。除了我已经在使用的 HashRouter 之外，我希望有一个解决方法。

【问题讨论】：

我用Suspence, lazy 和BrowserRoute 没有发现这样的问题，我认为你是因为子路由而得到它？

您是否在package.json 的主页字段中添加了该路由？

@NishargShah 是的，我已将整个 url 与基本路由一起放在主页字段中

我认为这是从我将回退到它自己的单独组件中并且必须将 Fallback() 传递给回退道具时开始的。

【参考方案1】：

我不建议将 SPA 部署到 gh-pages。

如果您想要更好的服务，我建议您使用 Netlify。

继续部署您的应用，这真的很容易，我相信您的问题会消失。

www.netlify.com

【讨论】：

我已经尝试将它部署到 netlify，但问题完全相同。它有自己的 404 页面显示。