ES6 Destructuring and Module imports

Question

I was under the impression that this syntax:

import Router from 'react-router'; var {Link} = Router; 

has the same final result as this:

import {Link} from 'react-router'; 

Can someone explain what the difference is?

(I originally thought it was a React Router Bug.)

Answer 1

import {Link} from 'react-router'; 

imports a named export from react-router, i.e. something like

export const Link = 42; 

---

import Router from 'react-router'; const {Link} = Router; 

pulls out the property Link from the default export, assuming it is an object, e.g.

export default {   Link: 42 }; 

(the default export is actually nothing but a standardized named export with the name "default").

See also export on MDN.

Complete example:

// react-router.js export const Link = 42; export default {   Link: 21, };   // something.js import {Link} from './react-router'; import Router from './react-router'; const {Link: Link2} = Router;  console.log(Link); // 42 console.log(Link2); // 21 

---

With Babel 5 and below I believe they have been interchangeable because of the way ES6 modules have been transpiled to CommonJS. But those are two different constructs as far as the language goes.