search
HomeOperation and MaintenanceNginxHow to solve the problem of 404 when Nginx configures React project

Code:

location /demo {

root E:/;

index index.html index.htm;

}

There is a problem with this configuration, it can only be accessed via http://localhost/demo/.

If you want to access other interfaces inside such as http://localhost/demo/page1, you will get a 404 page not found.

But during development, there was indeed no problem and it could be accessed, so I thought, do I have to use node for the project? No, maybe it’s because I don’t know how to configure it.

Solution

Finally found a solution. I found an extra line added in other people's nginx.config.

location /demo {

root E:/;

#With this added, you can add the route directly after the url to configure the path.

try_files $uri /demo/index.html;

index index.html index.htm;

}

The above is the detailed content of How to solve the problem of 404 when Nginx configures React project. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:亿速云. If there is any infringement, please contact admin@php.cn delete
NGINX's Key Features: Performance, Scalability, and SecurityNGINX's Key Features: Performance, Scalability, and SecurityApr 13, 2025 am 12:09 AM

NGINX improves performance through its event-driven architecture and asynchronous processing capabilities, enhances scalability through modular design and flexible configuration, and improves security through SSL/TLS encryption and request rate limiting.

NGINX vs. Apache: Web Hosting and Traffic ManagementNGINX vs. Apache: Web Hosting and Traffic ManagementApr 12, 2025 am 12:04 AM

NGINX is suitable for high concurrency and low resource consumption scenarios, while Apache is suitable for scenarios that require complex configurations and functional extensions. 1.NGINX is known for handling large numbers of concurrent connections with high performance. 2. Apache is known for its stability and rich module support. When choosing, it must be decided based on specific needs.

NGINX: The Versatile Tool for Modern Web ApplicationsNGINX: The Versatile Tool for Modern Web ApplicationsApr 11, 2025 am 12:03 AM

NGINXisessentialformodernwebapplicationsduetoitsrolesasareverseproxy,loadbalancer,andwebserver,offeringhighperformanceandscalability.1)Itactsasareverseproxy,enhancingsecurityandperformancebycachingandloadbalancing.2)NGINXsupportsvariousloadbalancingm

Nginx SSL/TLS Configuration: Securing Your Website with HTTPSNginx SSL/TLS Configuration: Securing Your Website with HTTPSApr 10, 2025 am 09:38 AM

To ensure website security through Nginx, the following steps are required: 1. Create a basic configuration, specify the SSL certificate and private key; 2. Optimize the configuration, enable HTTP/2 and OCSPStapling; 3. Debug common errors, such as certificate path and encryption suite issues; 4. Application performance optimization suggestions, such as using Let'sEncrypt and session multiplexing.

Nginx Interview Questions: Ace Your DevOps/System Admin InterviewNginx Interview Questions: Ace Your DevOps/System Admin InterviewApr 09, 2025 am 12:14 AM

Nginx is a high-performance HTTP and reverse proxy server that is good at handling high concurrent connections. 1) Basic configuration: listen to the port and provide static file services. 2) Advanced configuration: implement reverse proxy and load balancing. 3) Debugging skills: Check the error log and test the configuration file. 4) Performance optimization: Enable Gzip compression and adjust cache policies.

Nginx Caching Techniques: Improving Website PerformanceNginx Caching Techniques: Improving Website PerformanceApr 08, 2025 am 12:18 AM

Nginx cache can significantly improve website performance through the following steps: 1) Define the cache area and set the cache path; 2) Configure the cache validity period; 3) Set different cache policies according to different content; 4) Optimize cache storage and load balancing; 5) Monitor and debug cache effects. Through these methods, Nginx cache can reduce back-end server pressure, improve response speed and user experience.

Nginx with Docker: Deploying and Scaling Containerized ApplicationsNginx with Docker: Deploying and Scaling Containerized ApplicationsApr 07, 2025 am 12:08 AM

Using DockerCompose can simplify the deployment and management of Nginx, and scaling through DockerSwarm or Kubernetes is a common practice. 1) Use DockerCompose to define and run Nginx containers, 2) implement cluster management and automatic scaling through DockerSwarm or Kubernetes.

Advanced Nginx Configuration: Mastering Server Blocks & Reverse ProxyAdvanced Nginx Configuration: Mastering Server Blocks & Reverse ProxyApr 06, 2025 am 12:05 AM

The advanced configuration of Nginx can be implemented through server blocks and reverse proxy: 1. Server blocks allow multiple websites to be run in one instance, each block is configured independently. 2. The reverse proxy forwards the request to the backend server to realize load balancing and cache acceleration.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft