Javascript 使用Nginx刷新404部署后创建react应用程序中断
我正在使用CreateReact应用程序,它在我的本地应用程序上运行良好,没有任何问题。当我将其部署到IBM Cloud上时,在登录后,当我刷新页面时,它给出了404未找到错误之前它工作正常,不确定发生了什么 我看到了许多相关的问题,我试图解决但没有奏效的事情如下 1.创建了一个静态的.jsonJavascript 使用Nginx刷新404部署后创建react应用程序中断,javascript,reactjs,nginx,ibm-cloud,create-react-app,Javascript,Reactjs,Nginx,Ibm Cloud,Create React App,我正在使用CreateReact应用程序,它在我的本地应用程序上运行良好,没有任何问题。当我将其部署到IBM Cloud上时,在登录后,当我刷新页面时,它给出了404未找到错误之前它工作正常,不确定发生了什么 我看到了许多相关的问题,我试图解决但没有奏效的事情如下 1.创建了一个静态的.json { "root": "build/", "routes": { "/**": "index.html" } } 2。我有这个设置 devServer: { historyA
{
"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;
import React,{Component}来自'React';
从“样式化组件”导入样式化;
从“react Router dom”导入{BrowserRouter as Router,Route,Switch};
类应用程序扩展组件{
render(){
返回(
);
}
}
导出默认应用程序;
4。我尝试添加以下内容
import { HashRouter } from 'react-router-dom'
<HashRouter>
<App/>
</HashRouter>
从'react router dom'导入{HashRouter}
这些似乎都不适合我。任何建议我不相信这项工作:
<HashRouter>
<Router>
<Switch>
</Switch>
</Router>
</HashRouter>
我希望能帮助你 我不相信这项工作:
<HashRouter>
<Router>
<Switch>
</Switch>
</Router>
</HashRouter>
我希望能帮助你 我终于明白了。谢谢塞巴斯蒂安·塞特森的回答,这是通向正确道路的答案 我将我的路线更新为
<HashRouter basename="/">
<Switch>
<Route exact path="/" component={SignUp} />
<Route path="/some" component={Some} />
</Switch>
</HashRouter>
我终于明白了。谢谢塞巴斯蒂安·塞特森的回答,这是通向正确道路的答案 我将我的路线更新为
<HashRouter basename="/">
<Switch>
<Route exact path="/" component={SignUp} />
<Route path="/some" component={Some} />
</Switch>
</HashRouter>
将
构建/
输出作为静态站点提供服务时,您必须将nginx配置为始终提供index.html
(否则,它将尝试将url路径与不存在的静态文件夹/文件相匹配)。有关此行为的更多信息,请参见create-react应用程序
如果使用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/
当作为静态站点提供
build/
输出时,您必须将nginx配置为始终提供index.html
(否则,它将尝试将url路径与不存在的静态文件夹/文件相匹配)。有关此行为的更多信息,请参见create-react应用程序
如果使用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/