Doesn't work with react-loadable

[mustafamagdy]

I'm using react-loadable to lazy load components, and it works fine with react-router v4 I tried to use the toRoute but the components no longer load

it is hard for me to show the whole code, but here is a general idea

1- I've HOC to load the components like this

export const loadComponent = ({ component }) => {
  return Loadable({
    loader: async () => {
      return component();
    },
    ...defaultOptions
  });
};

2- Get the component loader like this

export const Dashboard = loadComponent ({  
  component: () => import("containers/Dashboard")
});

3- Use Route to load the component once route triggered <Route path={"/"} exact component={Dashboard} />

This works fine, now I tried to use the Location component like this

const HomeLocation = new Location("/");
{HomeLocation.toRoute({ component: Dashboard, invalid: NotFound })}

but it is not working, the link doesn't render anything

[bradstiff]

I am not familiar with react-loadable. If you can submit a link to a repro, I can try to help.

FYI, upon looking at their API, in order to take advantage of react-app-location's URL parsing capability, it appears you need to use the opts.render function in order to pass react-app-location's props on to your component.

[houssemzitoun]

Hi! I'm working with react-loadable, and react-app-location is working fine for me. This is an example from my app

const AccountViewLocation = new Location("/accounts/:accountId", {
  accountId: Yup.number()
    .integer()
    .positive()
    .required()
});
const AccountView = Loadable({
  loader: () => import("../Accounts/View"),
  loading: Loader
});

and this is the route generated like so

{
  AccountViewLocation.toRoute(
    { component: AccountView, invalid: ErrorPage },
    true
  );
}