CODEWITHSUNDEEP
reactjsreact-suspensereact-lazy-load
Marty
Marty

Reputation: 1

React.lazy and custom protectedRoute with router-react-dom, how do I get it to work?

I'm new to react and is trying out the React.lazy and Suspense imports, and I just have to say, I love them!!! My website went from 45% in performance up to 50-60% and that is without optimizing images! Google search results, here I come!

However, I have a problem, I don't know how to lazy load a component which is rendered in my custom ProtectedRoute and react-router-dom v5.

The lazy loading works and takes effect when I use the React-router-doms native Route, but when I want to load a protected component via one in my custom protected routes, nothing happens, no error message in console or on the website, just a white screen. I suspect there's some problem with the import and code being put in the wrong place.

APP

import React, { Suspense } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import ProtectedRoute from "./pages/middleware/ProtectedRoute";

const Login = React.lazy(() => import("./pages/Login"));
const WebsiteCRUDs = React.lazy(() => import("./pages/WebsiteCRUDs"));

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
                {/* This one works */}
          <Suspense fallback={<div>Loading</div>}>
            <Route exact path="/admin" component={Login} />
          </Suspense>
                {/* This one does NOT work */}
          <Suspense fallback={<div>Loading</div>}>
            <ProtectedRoute exact path="/admin/crud" component={WebsiteCRUDs} />
          </Suspense>
          </Switch>
      </Router>
    </div>
  );
}

export default App;

ProtectedRoute:

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { useEffect, useState } from "react";

const ProtectedRoute = ({ component: Component, ...rest }) => {
  const [isAuth, setIsAuth] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  // Logic validation goes here with redirect if user is not auth.

  return (
    <Route
      {...rest}
      render={(props) =>
        isLoading ? (
          <h1>Checking Validation</h1>
        ) : isAuth ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{ pathname: "/admin", state: { from: props.location } }}
          />
        )
      }
    />
  );
};

export default ProtectedRoute;

Upvotes: 0

Views: 1567

Answers (1)

Srini
Srini

Reputation: 320

Please try like this

import React, { Suspense } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import ProtectedRoute from "./pages/middleware/ProtectedRoute";

const Login = React.lazy(() => import("./pages/Login"));
const WebsiteCRUDs = React.lazy(() => import("./pages/WebsiteCRUDs"));

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Suspense fallback={<div>Loading</div>}>
            <Route exact path="/admin" component={Login} />
            <ProtectedRoute exact path="/admin/crud" component={WebsiteCRUDs} />
          </Suspense>
          </Switch>
      </Router>
    </div>
  );
}

export default App;

Upvotes: 2

Related Questions