当路由存在时，React 将我发送到 404

Question

我的网站包含路线，点击按钮后，它会将您发送到/start 路线。

它在 localhost 中运行良好 - 这对 htaccess 很可疑，但在我的服务器中它路由到 /start 并返回 404。

PHP 代码有效，因为它意味着向我发送电子邮件并发送给我（也在我的服务器托管中），但只有路由不起作用。

fetch('https://devcore.co.il/server/mail.php', {
    method: 'POST',
    redirect: 'follow',
    body: new URLSearchParams(formData)
})
.then(function(response) {
    if (response.status >= 200 && response.status < 300) {
        return response.text()
    }
    throw new Error(response.statusText)
})
.then(function(response) {
    console.log(response);
    if(response === 'success'){
        history.push("/start");
        history.go(0);
        executeScroll();
    }
})
.catch(function(err) {
    console.log(err);
});

我已经使用 fetch 来应用页面路由，在 localhost 中可以正常工作。

HTACCESS

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Content-Type "*"
    Header set Access-Control-Accept "*"
    # This should enable the authentication header
    Header set Access-Control-Allow-Credentials "true"
</IfModule>

我的路线

<Route path="/start">
  //Implementing my `/start` route
</Route>

是什么导致页面在服务器托管上进入 404 但在本地主机上工作？

Answer 1

每当我们将我们的 react 应用程序构建到生产模式时，路由在 apache 或 nginx 服务器中是这样的（something.com/index.html/route-path），因此我们必须通过跳过 index.html 来重写路径。试试这个配置。

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Answer 2

就我个人而言，我发现调用 history.push 非常棘手。还有其他地方可以调用该方法吗？我一般把它放在按钮的onClick部分。

onClick={() => {
console.log("Button clicked");
other methods calls...;
history.push("/start");
}}

但是，这将要求您在每个组件中设置历史常量，因此可能不是最干净的解决方案。这是我能提供的最好的。 如果您找到一种基于 response.status 有条件的 history.push 调用的方法，我会非常感兴趣和嫉妒。