系统相关
首页 > 系统相关> > reactjs – React Router路由无法在nginx create-react-app上运行

reactjs – React Router路由无法在nginx create-react-app上运行

作者:互联网

我正在使用“react-router-dom”:“^ 4.2.2”.

如果我在localhost上测试:3000 /秒它完美无缺.

当我使用nginx在ubuntu服务器上上传时,我尝试www.website.com,它可以工作.当我尝试使用www.website.com/second时,它找不到404.我正在使用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的/网站可用/默认
这是服务器的配置文件

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中的默认配置文件修改为:

    location / {
            # First attempt to serve request as file, then
            # as directory, then fall back to displaying a 404.
            try_files $uri /index.html;
    }

标签:create-react-app,nginx,reactjs,react-router
来源: https://codeday.me/bug/20190828/1748133.html