Load a Universal React Named Exported Component with the Key Option
It’s not uncommon to export a component as a named export as opposed to a default export. The key option in the universal higher-order component allows you to select which named export in the module that you’d like to load.
Man: [00:00] When you use universal and you tell it to import a file, it automatically pulls out the default export. If we look at fu, we can see that I'm exporting fu as the default. If I look at bar, I'm also exporting bar as the default. When I load those files, that's working but if I were to delete these defaults and only export fu and bar as named exports, when I save, it's going to tell me that the export wasn't found.
[00:36] It's actually showing me, I think, the default error component. The way you can fix this is two ways. It's actually one option called key. You can actually just pass it a string. You give it the name of the named export that you want to pull out of that module. Out of the fu file, I'd like to pull out the fu export.
[01:03] When I save that and refresh, I can now load fu. An alternative, if you need to do a little bit more with the module, is you can pass key a function. When you pass a function, you'll actually receive the full module that was loaded. You just need to return the export that you're looking for.
[01:26] There's two different ways you can do it. You can pass a string or a function. Now when I refresh, both fu and bar are loading their named exports.