reactjs - React 链接 - 部署后为 "requested URL was not found on this server"

Question

我的 React 应用程序在本地完美运行，当我部署时，索引页面加载完美。

但是，当我单击任何导航按钮时，我收到消息“在此服务器上未找到请求的 URL”。它还说“此外，在尝试使用 ErrorDocument 处理请求时遇到了 404 Not Found 错误。”

谁能告诉我我的代码中缺少什么？只有部署的版本被破坏了。

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navigation from '../Navbar/Navbar';
import Home from '../../Pages/Home/Home';
import Services from '../../Pages/Services/Services';
import Bicultural from '../../Pages/Bicultural/Bicultural';
import Training from '../../Pages/Training/Training';
import Talent from '../../Pages/Talent/Talent';
import Mission from '../../Pages/Mission/Mission';
import Team from '../../Pages/Team/Team';
import About from '../../Pages/About/About';
import Blog from '../../Pages/Blog/Blog';
import Careers from '../../Pages/Careers/Careers';
import Contact from '../../Pages/Contact/Contact';
import NoMatch from '../../Pages/NoMatch/NoMatch';
import Footer from '../Footer/Footer';
import ScrollToTop from '../ScrollUpButton/ScrollToTop';


function App() {
  return (
    <div className="App">
      <React.Fragment>
        <Router>
          <Navigation className="no-bg" />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/services" component={Services} />
            <Route exact path="/bicultural" component={Bicultural} />
            <Route exact path="/training" component={Training} />
            <Route exact path="/talent" component={Talent} />
            <Route exact path="/mission" component={Mission} />
            <Route exact path="/team" component={Team} />
            <Route exact path="/about" component={About} />
            <Route exact path="/blog" component={Blog} />
            <Route exact path="/careers" component={Careers} />
            <Route exact path="/contact" component={Contact} />
            <Route component={NoMatch} />
          </Switch>
        </Router>
        <Footer />
        <ScrollToTop />
      </React.Fragment>
    </div>


  );
}

export default App;

Answer 1

啊，好吧，这是我的愚蠢错误。一路上的某个地方，当我进行重建时，我的 .htaccess 文件被删除了。一旦我重新制作并上传了它，一切都完美无缺。

如果您遇到此问题，请制作一个名为“.htaccess”的文件，并将其上传到与您的构建相同的文件夹中。

.htacces 文件的内容应该是这样的:

RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]