React Links - 部署后“在此服务器上找不到请求的 URL”答案

【问题标题】：React Links - "requested URL was not found on this server" after being deployedReact Links - 部署后“在此服务器上找不到请求的 URL”
【发布时间】：2020-06-12 00:00:39
【问题描述】：

我的 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;

【问题讨论】：

尝试使用完整的网址。或者也许将htaccess.txt 更改为.htaccess？
您在哪里部署以及 url 看起来如何？我猜你是从一个破坏客户端路由的子目录中提供你的应用程序
不，它不是来自子目录。我从 uxcreative.io 提供服务，这是我正在测试的域，并将其设置为 package.json 文件中的“主页”。当我单击链接时，地址栏确实会更改为正确的路径。它只是不像本地那样显示内容。

标签： reactjs react-router

【解决方案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]

【讨论】：