![](/img/trans.png)
[英]Nginx and Create React App (with React Router) full routes not working
[英]React Router routes not working on nginx create-react-app
我正在使用"react-router-dom": "^4.2.2"
。
如果我在localhost:3000/second
上测试,它会完美运行。
当我使用 nginx 在 ubuntu 服务器上上传它并尝试www.website.com
时,它可以工作。 当我尝试使用www.website.com/second
时,它给我404 not found
。 我正在使用create-react-app
。
应用程序.js
class TestRoutes extends React.Component{
constructor(props){
super(props);
}
render(){
return(<React.Fragment>
<BrowserRouter>
<Switch>
<Route exact path='/' component={MainPage}/>
<Route path='/second' component={SecondPage}/>
<Route path='/third' component={ThirdPage}/>
</Switch>
</BrowserRouter>
</React.Fragment>);
}
}
ReactDOM.render(<TestRoutes/>, document.getElementById("root"));
/etc/nginx/sites-available/default这是来自服务器的配置文件
server {
listen 443 ssl;
root /var/www/reactcamera/build;
# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;
server_name website.com www.website.com;
ssl_certificate /etc/letsencrypt/live/website.com/fullchain.pem; #
managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/website.com/privkey.pem; #
managed by Certbot
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ =404;
}
答案在这个线程React-router and nginx中找到
我要做的是将/etc/nginx/sites-available/default
中的default
配置文件修改为:
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri /index.html;
}
如果您希望在Dockerfile
中执行此操作并使用nginx
运行您的React
应用程序,请参阅以下答案。
https://stackoverflow.com/a/61753597/4388776
这修复了React Router
问题,您允许nginx
将来自不同端点的流量直接路由到您的 React 应用程序。
在实时服务器中对我有用的解决方案:
server {
listen 80;
listen [::]:80;
root /var/www/example.com;
index index.html index.htm index.nginx-debian.html;
server_name example.com www.example.com;
location / {
try_files $uri $uri/ /index.html;
}
}
您需要通过 /etc/nginx/sites-available/ 配置 nginx。
将有一个模板默认文件,因此如果您想保留它,请复制它。 完成后,使用任何文本编辑器并将 /etc/nginx/sites-available/default 更改为以下内容:
server {
listen 80 default_server;
root /var/www/[Your repo name]/build;
server_name [your.domain.com] [your other domain if you want to];
index index.html index.html;
location / {
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.