0

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

这是相同的 gh-pages，每个人都有 404 错误问题，当我在此之前遇到它时，将 basename 属性添加到 BrowserRouter 组件将起作用。但是，即使添加了 basename prop，如果我去某个路线并刷新，也会出现 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 之外，我希望有一个解决方法。

4

1 回答 1

1

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

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

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

www.netlify.com

于 2021-08-15T19:04:10.707 回答