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](https://github.com/rackt/react-router/issues/2468).)

Answer: 
To do this:

```
import {purple, grey} from 'themeColors';

```

*Without repeating `export const` for each symbol*, just do:

```
export const
  purple = '#BADA55',
  grey = '#l0l',
  gray = grey,
  default = 'this line actually causes an error';

```
Except for different exports, it may also lead to
different bundled code by WebPack when using two variant ways to destruct ESM modules:

```js
// react-router
export function Link(str) { /* ... */ }

```

1. Destruct within the `import` statement:

```js
import {Link} from 'react-router';

Link('1');
Link('2');

```

```js
// WebPack output
var util_mobileValidator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
(0,util_mobileValidator__WEBPACK_IMPORTED_MODULE_3__.Link)('1');
(0,util_mobileValidator__WEBPACK_IMPORTED_MODULE_3__.Link)('2');

```
2. Use destructuring syntax:

```js
import * as Router from 'react-router';
const {Link} = Router;

Link('1');
Link('2');

```

```js
// WebPack output:
var util_mobileValidator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
const {Link} = util_mobileValidator__WEBPACK_IMPORTED_MODULE_3__;
Link(1);
Link(2);

```

As you can see in the output example above where there is redundant code, which is not good for optimization when trying to uglify via `UglifyJS`, or `Terser`.