reactLoadableRouting

    0

    2

    The code makes three Loadable objects to represent each route in the application. The Home object has a loader function that calls import to get the resources for the Home route. The Product and About objects have the same loader function, which imports the resources for the Product and About routes, respectively. The App object has a Switch which contains an instance of the Home, Product, and About routes, with the NoMatch route as the default.

    The code creates these objects by calling the Loadable constructor with the arguments . . . . The Loadable constructor takes an object as its only argument, which is how the code creates the Home, Product, and About objects. These objects each have a loader function, which is invoked when the route for that object is requested. The loading property on each object represents the loading state of that object.

    The code defines three routes in the App object: the Home route, the Product route, and the About route. The Home route has an exact path of "/", so the code uses the Route object's exactPath property to set the path property on the Switch object to "/". The Product and About routes both have path properties of "/product" and "/about", so the code uses the Route object's component property to

    Library: react

    import React from 'react'
    import { Switch, Route } from 'react-router-dom'
    import Loadable from 'react-loadable'
    
    
    const Loading = () => <div>loading...</div>
    
    const Home = Loadable({
      loader: () => import('./Home'),
      loading: Loading
    })
    
    const Product = Loadable({
      loader: () => import('./Product'),
      loading: Loading
    })
    
    const About = Loadable({
      loader: () => import('./About'),
      loading: Loading
    })
    
    const App = () => (
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/product" component={Product}/>
        <Route path="/about" component={About}/>
        <Route component={NoMatch}/>
      </Switch>
    )
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.