Question

我将 Firebase 托管与 ReactJS 结合使用。如果我在我的本地主机的 url 中包含一个参数，这可以正常工作。配置如下：

只有当我将它部署到 firebase 托管时，我才会得到一个白色的空白页面。例如：在我的 routes.js 中：

{
    path: "/ontbijt-betaling/:id",
    layout: ModalLayout,
    exact: false,
    component: PayBreakfastView
  },

在我看来：

import React from "react";
import { Container, Row, Col } from "shards-react";


import PayBreakfastComponent from "../../components/Frontend/PayBreakfastComponent";
import FooterView from "../Footer";
import HeaderView from "../Header";



const PayBreakfastView = (props) => (

  
  <Container fluid >
 <HeaderView />
    <PayBreakfastComponent id={props.match.params.id}/>
    <FooterView />

  
  </Container>
);

export default PayBreakfastView;

和组件：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router-dom';
import { Row, Col, Card, CardHeader, CardBody, Button } from "shards-react";
import Firebase from 'firebase';

class PayBreakfastComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name:'',
            mail:'',
            shortDesc:'',
            payment:[]
            
        };
    }

    componentWillMount(){
        console.log('mount')
        let tempPayment = Firebase.database().ref('/clients/-uhfwoebfwioudb/content/temp-payments/'+this.props.id);
        tempPayment.on('value', snapshot => {
            let state =  snapshot.val();

          
            this.setState({
                payment: state,
                get: true
            })
            localStorage.setItem('name',state.name);
        localStorage.setItem('mail',state.email);
        localStorage.setItem('date',state.date);
        localStorage.setItem('phone',state.phone);
        localStorage.setItem('adres',state.adres);
        localStorage.setItem('postal',state.zip);
        localStorage.setItem('city',state.city);
        localStorage.setItem('bookingID', state.bookingsnumber)
        localStorage.setItem('amount',state.amount);
        localStorage.setItem('shippingCost',state.shippingCost);
        localStorage.setItem('unitPrice',state.unitPrice);
        localStorage.setItem('total',state.totalPrice);
            console.log(state.email)
          })

          
    }

    payOrder(){

       
        

        
      /*  var xhr = new XMLHttpRequest();
     
        xhr.open('POST', 'https://app.biejanssen.nl/paymentBreak');
              xhr.setRequestHeader("Content-Type", "application/json");
  
              let data ={
                  totalPrice: this.state.payment.totalPrice,
                  nameClient: this.state.payment.name,
                  emailClient: this.state.payment.email,
              }
             xhr.send(JSON.stringify(data));
  
             xhr.onload = () => {
              console.log("status is:"+xhr.responseURL);
              window.location.href=xhr.responseURL;
          
          };*/
    }

    render() {
       
        return (
            <div className="home-page">
            <Row className="contact-row">
                <Col sm={12} className="contact-colum">
                    <h2>Ontbijt betalen</h2>                    
                </Col>
            </Row>

            <Row> 
                <Col sm={3}></Col>
                <Col sm={6} className="frontend-table">
                    <h2>Uw bestel overzicht</h2>
                    <form method="post" action={"https://app.biejanssen.nl/paymentBreak"} id="hook-form" >
                <table>
              
                    <tr>
                        <td><span className="total-fat">Order nummer</span></td>
                        <td>{this.state.payment.bookingsnumber} <input type="text" value={this.state.payment.bookingsnumber} hidden/></td>
                    </tr>
                    <tr>
                        <td><span className="total-fat">Omschrijving</span></td>
                        <td>Ontbijt</td>

                    </tr>
                    <tr>
                        <td><span className="total-fat">Uw naam</span></td>
                        <td>{this.state.payment.name} <input type="text" name="nameClient" value={this.state.payment.name} hidden/></td>
                    </tr>
                    <tr>
                        <td><span className="total-fat">Uw e-mail</span></td>
                        <td>{this.state.payment.email} <input type="text" name="emailClient" value={this.state.payment.email} hidden/></td>
                    </tr>
                    <tr>
                        <td><span className="total-fat">Uw telefoonnummer</span></td>
                        <td>{this.state.payment.phone}</td>
                    </tr>
                    <tr>
                        <td><span className="total-fat">Aflever datum</span></td>
                        <td>{this.state.payment.date}</td>
                    </tr>
                    <tr>
                        <td><span className="total-fat">Aflever adres</span></td>
                        <td>{this.state.payment.adres}, {this.state.payment.zip}, {this.state.payment.city}</td>
                    </tr>
                    <tr>
                        <td><span className="total-fat">Aantal ontbijtjes</span></td>
                        <td>{this.state.payment.amount}</td>
                    </tr>
                    <tr>
                        <td><span className="total-fat">Prijs per ontbijt</span></td>
                        <td>€ {this.state.payment.unitPrice}</td>
                    </tr>
                    <tr>
                        <td><span className="total-fat">Bezorgkosten ontbijt</span></td>
                        <td>€ {this.state.payment.shippingCost}</td>
                    </tr>

                    <tr>
                        <td><span className="total-oder">Totaal</span></td>
                        <td><span className="total-oder">€ {this.state.payment.totalPrice} <input type="text" name="totalPrice" value={this.state.payment.totalPrice} hidden/></span></td>
                    </tr>

                    

               </table>
               <button type="submit" form="hook-form">Betaal</button>
                    </form>
                <Button onClick={()=>this.payOrder()} >Betaal bestelling!</Button>
                </Col>
                <Col sm={3}></Col>

            </Row>

            </div>



        );
    }
};

export default PayBreakfastComponent;

示例网址为：https://app.biejanssen.nl/ontbijt-betaling/-MWTRAO7Lhjqc47-y6z-

有没有人明白区别在哪里或这是如何可能的？

Answer 1

如果您查看浏览器 DevTools，您会看到以下错误：

<块引用>

未捕获的语法错误：意外标记“<”

[ Browser DevTools showing error "Unexpected token '<'"1

此错误通常意味着从服务器请求了 JavaScript，但它返回了 HTML。

如果您查看 https://app.biejanssen.nl/ontbijt-betaling/-MWTRAO7Lhjqc47-y6z- 的源代码，您会发现脚本标记从相对路径加载 main 块：

<script src="./static/js/main.cc963dc1.chunk.js"></script>

导致从以下位置加载 JavaScript 文件：

https://app.biejanssen.nl/ontbijt-betaling/static/js/main.cc963dc1.chunk.js

该路径中不存在文件文件，如果您查看为 https://app.biejanssen.nl/dashboard 加载的资源，您会发现 JavaScript 文件实际存在于：

https://app.biejanssen.nl/static/js/main.cc963dc1.chunk.js

您需要更新应用程序以始终从域的根目录加载 JavaScript 和其他资源。路径开头没有 . 的类似内容：

<script src="/static/js/main.cc963dc1.chunk.js"></script>

Firebase 托管中的空白页面，url reactjs

1 个答案: