I am facing an issue with loading two files using react.lazy and suspense:
import React, { Suspense, lazy } from "react";
import { Route, Redirect } from 'react-router-dom';
const MainLayout = lazy(() => import('Components/Layout/MainLayout'))
export const PrivateRoute = () => (
<Route render={() => {
return (
localStorage.getItem('user') != null // check if user is valid
?
<Suspense fallback={<div>Loading...</div>}>
<MainLayout/>
</Suspense>
: <Redirect to={{ pathname: '/login'}} />)
}} />
)
Second:
import React, { Suspense, lazy } from "react";
const DefaultLayout = lazy(() => import('Components/Layout/DefaultLayout'))
export const PublicRoute = () => (
<Suspense fallback={<div>Loading...</div>}>
<DefaultLayout/>
</Suspense>
)
The /login path refers to a component (login) inside the
DefaultLayout component.
Situation:
When the user is not logged in, I display the DefaultLayout component containing the login component, which also imports cssFile1.css.
Once the user enters credentials and logs in, they are directed to a path within my PrivateRoute that contains cssFile2.css.
The challenge here is unloading cssFile1.css after the user logs in. Is it possible, and if so, how can this be achieved?