1

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

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

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

欢迎任何建议！

应用程序.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",
4

2 回答 2

0

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

<base href="/" />
于 2020-08-23T05:33:43.263 回答
0

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

于 2020-08-23T18:09:36.777 回答