After redirecting React is re rendered and send back to the cached login IE11

Question

I'am struggling to find a quick solution to my problem , because clients are complaining about that the Site cannot be rendered on the IE . I have done a little research and i came across this react-app-polyfill/ie11 . I have insert it as an entry point on mine src/index.js It have worked i saw my project ( only the login tho ) working on IE 11 , but after the login it is redirected again back to the login page . The error that IE throws back is : DOM7011 : The code on this page disabled back and forward caching. Unhandled promise rejection TypeError: Unable to get property 'data' of undefined or null reference

After a while i came also across this : https://reactjs.org/docs/javascript-environment-requirements.html

The new JavaScript Environment Requirements . Bassicly they suggest to enable as an entry point on your index.js this import 'core-js/es/map'; import 'core-js/es/set';

So far i have no clue what is going on , but still the app is not running properly on IE . Can somebody give me some advice what to do ?

UPDATED Login.js

export default class Login extends Component {
constructor(props) {
    super(props);

    this.state = {
        translations: EN_TRANSLATIONS,
        clientNumber: "",
        password: "",
        redirectToReferrer: '',
        loginErrorMessage: "",
        lockedUntilDate: ''
    };


}

async componentWillMount() {

    let tenant = window.location.hostname


    axios.post(SERVER_URL + '/api/user/page', {
        tenant: tenant
    })

        .then(response => {

            localStorage.setItem('page', JSON.stringify(response.data.branding));
            localStorage.setItem('tenant', tenant);

            this.setState({
                branding: response.data.branding,
                tenant: tenant,
                pageReady: true
            });
        });

login = () => {

    axios.post(SERVER_URL + '/api/user/access', {
        tenant: this.state.tenant,
        customerNumber: parseInt(this.state.clientNumber),
        password: sha1(this.state.password + FE_SALT)
    })
        .then(response => {

            localStorage.setItem('token', response.data.token);
            localStorage.setItem('access', JSON.stringify(response.data.branding));

            this.setState({
                branding: response.data.branding,
                accessReady: true
            });

            if (this.state.accessReady) {

                if (response.data.passwordValidity >= 0) {
                    Auth.authenticate(response => {
                        this.setState({ redirectToReferrer: 'dashboard' })
                    });
                } else {
                    Auth.authenticate(response => {
                        this.setState({ redirectToReferrer: 'changePassword' })
                    });
                }
            }

        })

``

index.js

import 'react-app-polyfill/ie9';
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/jsdom';

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
 <BrowserRouter>
  <App />
 </BrowserRouter>,
document.getElementById("root")
 );

Also i marked that i cannot import 'react-app-polyfill/stable' i think this should work , but i am not sure .

UPDATE I have deleted the node_modules and installed again react-app-polyfill . Now the 'react-app-polyfill/stable' is recognized , but i ran into another error . SCRIPT438: Object doesn't support property or method 'repeat' ... This IE is making me crazy ...

UPDATE Okey so i was able to delete my private routes and make every route after the login visible <Route/> . If i hardcode the URL path and disable the security i can get access to my dashboard page . So that gives me thinking that the problem is coming from the <Redirect/> component . Because he is the only one standing between the login and the dashboard . Any suggestion why is this conflict between IE and <Redirect/> ???

About the "DOM7011" error, please try to debug your code, when login the page, please check the http request whether you disabled cache, whether you are using Https request? after login success, how do you redirect back the page. More detail information about this error, you could check [this thread](https://stackoverflow.com/questions/21920864/form-javascript-not-working-on-ie-11-with-error-dom7011) and the [Back navigation caching](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/dn265017(v%3dvs.85)). — Zhi Lv, Jul 25 '19 at 08:10
If still not working, can you post the related code to reproduce the problem as in [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). — Zhi Lv, Jul 25 '19 at 08:10
@ZhiLv-MSFT i have updated my post you can take a look of part of my code . — PandaMastr, Jul 25 '19 at 08:37
I suggest you could try to add debugger and add watch in the post and then function, to check whether the response contains data and the local storage contains the value. Besides, you could also try to use F12 developer Network tools to check the post request and check the request and response body, whether it contains the data and enable the cache. And, here is [an article](https://medium.com/@anneeb/redirecting-in-react-4de5e517354a) about using redirect component, it seems that if we are using the redirect component, we could set the redirect status to true. — Zhi Lv, Jul 25 '19 at 14:59
which version of react and react router (and the redirect component) are you using? — Zhi Lv, Jul 25 '19 at 15:03

After redirecting React is re rendered and send back to the cached login IE11

0 Answers0