[英]React Router routes not working on nginx create-react-app
I'm using "react-router-dom": "^4.2.2"
.我正在使用
"react-router-dom": "^4.2.2"
。
If I test on localhost:3000/second
it works perfectly.如果我在
localhost:3000/second
上测试,它会完美运行。
When I upload this on ubuntu server with nginx and I try www.website.com
, it works.当我使用 nginx 在 ubuntu 服务器上上传它并尝试
www.website.com
时,它可以工作。 When I try to use www.website.com/second
it gives me 404 not found
.当我尝试使用
www.website.com/second
时,它给我404 not found
。 I'm using create-react-app
.我正在使用
create-react-app
。
app.js应用程序.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 Here's the configuration file from the server /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;
}
The answer is found in this thread React-router and nginx答案在这个线程React-router and nginx中找到
What I had to do was modify default
configuration file in /etc/nginx/sites-available/default
to:我要做的是将
/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;
}
If you wish to do this in a Dockerfile
and run your React
app, using nginx
please see the below answer.如果您希望在
Dockerfile
中执行此操作并使用nginx
运行您的React
应用程序,请参阅以下答案。
https://stackoverflow.com/a/61753597/4388776 https://stackoverflow.com/a/61753597/4388776
This fixes the React Router
issues where you allow nginx
to route traffic coming on different endpoints, directly to you React Application.这修复了
React Router
问题,您允许nginx
将来自不同端点的流量直接路由到您的 React 应用程序。
The solution that works for me in the live server:在实时服务器中对我有用的解决方案:
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;
}
}
You need to configure nginx by going /etc/nginx/sites-available/.您需要通过 /etc/nginx/sites-available/ 配置 nginx。
There will be a template default file so if you would like to keep it, copy it.将有一个模板默认文件,因此如果您想保留它,请复制它。 After you do that, use any text editor and change /etc/nginx/sites-available/default to following:
完成后,使用任何文本编辑器并将 /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.