React Router 路由不适用于 nginx create-react-app

Question

我正在使用 "react-router-dom": "^4.2.2"。

如果我在 localhost:3000/second 上进行测试，它会完美运行。

当我使用 nginx 将其上传到 ubuntu 服务器并尝试 www.website.com 时，它有效。当我尝试使用 www.website.com/second 时，它给了我 404 not found。我正在使用 create-react-app。

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;
    }

Answer 1

您需要通过 /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 / {
   }
}

Answer 2

答案在这个线程中找到

我要做的是将 /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;
    }

Answer 3

我在live服务器上的解决方案：

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;
        }
}

Answer 4

如果您希望在 Dockerfile 和运行您的 React 应用程序中执行此操作，请使用 nginx 请参阅以下答案。

这修复了允许 nginx 将来自不同端点的流量直接路由到您的 React 应用程序的 React Router 问题。

React Router 路由不适用于 nginx create-react-app

React Router routes not working on nginx create-react-app

nginx

reactjs

react-router

create-react-app