React Router App 在重新加载子页面时获得 404 - 无服务器，没有 webpack答案

【问题标题】：React Router App gets 404 on reload of subpage - serverless, no webpackReact Router App 在重新加载子页面时获得 404 - 无服务器，没有 webpack
【发布时间】：2020-08-23 03:12:07
【问题描述】：

我知道这听起来与几篇较早的帖子完全一样，但我已经浏览过它们，但它们没有帮助。我有一个非常简单的 React 应用程序：http://bentleytech.com。它可以正常导航，直到您尝试重新加载页面，或者如果您尝试直接访问页面，例如：http://bentleytech.com/Contact。然后，您会收到 404 错误。当我在本地主机上运行代码时工作正常，但不是部署的版本。

我没有使用 Express，因此默认 app.use 语句等任何解决方案都不适用。我没有使用 webpack，所以告诉我更改该配置也无济于事。

我尝试从 BrowserRouter 切换到 HashRouter，这导致我的页面根本无法加载。

欢迎提出任何建议！

App.js：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import About from "./pages/About";
import Portfolio from "./pages/Portfolio";
import Contact from "./pages/Contact";

import Nav from "./components/Nav";
import Footer from "./components/Footer";

function App() {
  return (
    <Router>
      <>
        <Nav />
        <Switch>
          <Route exact path="/About"><About /></Route>
          <Route exact path="/Portfolio"><Portfolio /></Route>
          <Route exact path="/Contact"><Contact /></Route>
          <Route path="/*"><About /></Route>
        </Switch>
        <Footer />
      </>
    </Router>
  );
};

export default App;

包.json：

  "name": "react-portfolio",
  "version": "0.1.0",
  "private": true,
  "description": "Portfolio for Andrea C. Bentley",
  "homepage": "http://bentleytech.com",

【问题讨论】：

我根据你的代码试过了。我没发现问题。不确定它的路由器问题。你可以在这里查看演示：stackblitz.com/edit/react-h97kbg
有趣...是的，你的似乎工作得很好。不知道那是什么问题？
分享更多数据。很难从中看出:-(
我应该分享什么？我不知道！
尝试在 stackblitz 上复制相同的代码[stackblitz.com/] react 沙箱。这样任何人都可以看到您的代码并修复它

标签： reactjs react-router

【解决方案1】：

我认为您只需要在 index.html 头部分中设置基本 href，它应该可以正常工作：

<base href="/" />

【讨论】：

哦！我以前没见过这个建议！我会试试...谢谢！
这似乎没有帮助，但感谢您的建议！

【解决方案2】：

好吧，事实证明，从 BrowserRouter 切换到 HashRouter 确实解决了问题。我认为我的测试环境有一个单独的问题，导致它以前无法工作。现在，我的 url 中有那些我不喜欢的主题标签，但对于一个正常运行的应用程序，我可以忍受。希望这对其他人有帮助。

【讨论】：