Question

所以，我让这个应用程序在前端使用react。当我访问应用程序的本地路由（'/'）时，它运行完美。.当我在导航器的index.html中使用导航栏时，所有链接都可以正常工作当我尝试使用浏览器的URL栏手动访问特定的URL时，即http://localhost:800/api/todos,,I被提供了来自与React应用程序连接的端点的json数据。链接到home组件中。.一切正常，可能是问题所在。我的支持是express js。

刷新链接，我得到json而不是index.html中呈现的组件

Answer 1

如果您尝试通过url发送用户名和密码（如果您的后端有post api并需要任何种类的凭据），那么第一件事就是您无需访问主页即可访问url，可以使用以下代码。

第二部分，在刷新数据时，丢失的数据将使您无法使用localStorage.setItem（key，value）持久化数据

 componentWillUnmount(){
    localStorage.clean()
    }

请记住：使用上述方法注销后清除本地存储中的数据

export function PostData() {

        function getUrlVars() {
            var vars = {};
            var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
                vars[key] = value;
            });
            return vars;
        }

        function getUrlParam(parameter, defaultvalue){
            var urlparameter = defaultvalue;
            if(window.location.href.indexOf(parameter) > -1){
                urlparameter = getUrlVars()[parameter];
                }
            return urlparameter;
        }
        var targetUrl = '/xmsreport/report/reportdata'
        return new Promise((resolve, reject) => {
            fetch(targetUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': "application/json; charset=utf-8",
                    "Accept": "application/json"
                },
                body: JSON.stringify({

                    "requestData": {
                        "userName":(localStorage.hasOwnProperty("user")?localStorage.getItem('user'):getUrlParam("un","")),
                        "password":(localStorage.hasOwnProperty("pass")?localStorage.getItem('pass'):getUrlParam("ps","")),

                         }

                })

            }) .then(response => response.json())
                .then((responseJson) => {
                    resolve(responseJson)
                })
                .catch((error) => {
                    reject(error)
                })
        })

    }

我在浏览器中刷新页面时React.Js应用程序未呈现组件

1 个答案: