使用Nginx在刷新404部署后创建react应用程序中断

Question

我正在使用create-react应用程序，它在我的本地上运行良好，没有任何问题。当我在IBM Cloud上部署它时，登录后，当我刷新页面时，它会出现404未找到错误它以前工作得很好，不确定发生了什么。

我看到了许多相关的问题，我试图解决但没有成功的事情正在遵循

1. 创建了一个静态.json

{
"root": "build/",
"routes": {
"/**": "index.html"
}
}

2.我有这个设置

devServer: {
historyApiFallback: true,
contentBase: './',
hot: true
},

3.我试着在路由器周围添加，但没有成功

import React, { Component } from 'react';
import styled from 'styled-components';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
class App extends Component {
render() {
return (
<>
<Router>
<Switch>
<Route exact path="/" component={SignUp} />
<Route path="/some" component={Some} />
</Switch>
</Router>
</>
);
}
}
export default App;

4.我试图添加以下

import { HashRouter } from 'react-router-dom'
<HashRouter>
<App/>
</HashRouter>

这些似乎都不适合我。有什么建议吗

Answer 1

当将build/输出作为静态站点时，您必须将nginx配置为始终为index.html服务(否则，它将尝试将url路径匹配到不存在的静态文件夹/文件(。有关此行为的更多信息，请参阅create-react-app文档

如果你使用nginx docker镜像来服务你的网站，你需要设置以下default.conf:

server {
location / {
root   /usr/share/nginx/html;
index  index.html index.htm;
try_files $uri $uri/ /index.html;
}
location ~ ^/$ {
rewrite  ^.*$  /index.html  last;
}
listen       80;
server_name  localhost;
# redirect server error pages to the static page /50x.html
#
error_page   500 502 503 504  /50x.html;
location = /50x.html {
root   /usr/share/nginx/html;
}
}

请注意，rewrite ^.*$ /index.html部分修改任何传入呼叫并为index.html提供服务。

你的最小Dockerfile看起来是这样的：

FROM nginx
COPY default.conf /etc/nginx/conf.d/default.conf
COPY build/ /usr/share/nginx/html/

Answer 2

我不相信这样做：

<HashRouter> 
<Router>
<Switch>
</Switch>
</Router>
</HashRouter>

我认为您需要构建应用程序并运行它。我看到一个常见的错误：

react-scripts start
/bin/sh: 1: react-scripts: not found

我希望能帮助你！

Answer 3

我终于想通了。谢谢Sebastián Sethson的回答，你的回答指引了正确的道路。

我更新了的路由

<HashRouter basename="/"> 
<Switch>
<Route exact path="/" component={SignUp} />
<Route path="/some" component={Some} />
</Switch>
</HashRouter>