Breaking News: Grepper is joining You.com. Read the official announcement!

Lazy Load React Component and Bind Suspense (for loaders) with React Router DOM (Switch)

Yucky Yak answered on February 24, 2022 Popularity 3/10 Helpfulness 1/10

answer Lazy Load React Component and Bind Suspense (for loaders) with React Router DOM (Switch)

Lazy Load React Component and Bind Suspense (for loaders) with React Router DOM (Switch)

Comment

import React, { lazy, Suspense } from "react";
import "./App.css";
import CountriesContainer from "./routes/CountriesContainer";
import { Switch, Route, BrowserRouter as Router } from "react-router-dom";
import Navbar from "./components/Navbar";

// pages
const Home = lazy(() => import("./routes/Home"));
const Favourites = lazy(() => import("./routes/Favourites"));
const NotFoundPage = lazy(() => import("./routes/NotFoundPage"));

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Router>
        <Navbar />
        <Switch>
          <Route path="/" component={Home} exact />
          <Route path="/data" component={CountriesContainer} />
          <Route path="/favourites" component={Favourites} />
          <Route component={NotFoundPage} />
        </Switch>
      </Router>
    </Suspense>
  );
};

export default App;
view raw

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: bind dom javascript load react-component react-router

Link to this answer
Share Copy Link

Contributed on Feb 24 2022

Yucky Yak

0 Answers Avg Quality 2/10

Lazy Load React Component and Bind Suspense (for loaders) with React Router DOM (Switch)

Contents

More Related Answers

Lazy Load React Component and Bind Suspense (for loaders) with React Router DOM (Switch)

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.