routes

routes.js example

export default {
  // The main routes expects an object rather than an array.  We can use this
  // to configure the routes and how they will behave.

  // When we are attempting to render a secured route the onSecureRequest will
  // be called.  This should provide a promise that resolves to a SecurityProvider
  // component which will wrap any secure routes.
  //
  // As we nest routes, new onSecureRequest properties will be used if provided, otherwise
  // any secure routes will use the first onSecureRequest
  SecurityProvider: () =>
    import(/* webpackChunkName: "security" */ './ui/screens/Login'),

  routes: [
    {
      // The unique ID we want to assign to the route,
      // this will be used for values such as the "key"
      // property and similar.
      id: 'home',

      // What path pattern do we want to match this route for?
      // https://reacttraining.com/react-router/web/api/Route/path-string
      // https://www.npmjs.com/package/path-to-regexp
      path: '/',

      // Does the user have to be logged in to view this route?
      secure: false,

      // Does the url pattern need to match exactly?
      exact: true,

      // What static props do we want to provide the matching route ?
      props: {
        title: 'Home',
      },

      // Provide a function that will return a promise that resolves
      // with the route and its dependencies.  This provides the layer
      // required to handle asynchronous / code split routes.
      //
      // If component is provided, it will be rendered when we have an exact
      // match (/dashboard).
      //
      // If it has child routes then they will be rendered as the components
      // children via an async component.
      component: () =>
        import(/* webpackChunkName: "home" */ './ui/screens/Home'),
    },
    {
      id: 'dashboard',
      path: '/dashboard',
      secure: true,
      exact: false,
      props: {
        title: 'Home',
      },
      component: () =>
        import(/* webpackChunkName: "dashboard" */ './ui/screens/Dashboard'),
      routes: () =>
        import(
          /* webpackChunkName: "dashboard_routes" */ './ui/screens/Dashboard/routes',
        ),
    },
  ],
};