For example, in the following:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

What is the relationship between Router, Route, Switch and BrowserRouter? Is this a form of destructuring?

If so, I thought destructuring was done using the following syntax:

  import React, { Fragment } from 'react'

  function App() {
    return (
      <Fragment>
       //...
      </Fragment>
    
    );
  }

For example, in the following:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

What is the relationship between Router, Route, Switch and BrowserRouter? Is this a form of destructuring?

If so, I thought destructuring was done using the following syntax:

  import React, { Fragment } from 'react'

  function App() {
    return (
      <Fragment>
       //...
      </Fragment>
    
    );
  }

• javascript
• reactjs
• ecmascript-6
• import

• 2 You have really everything here: developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – kind user Commented Nov 2, 2020 at 23:40
• @Jayce444 that's really not helpful at all. I remember being confused by plenty of things that seem obvious in retrospect, now that I have knowledge that I didn't then. – Slbox Commented Nov 2, 2020 at 23:55

2 Answers 2

It is very similar to destructuring, though not exactly the same thing. The as keyword is a special one for when you want to import a named export of a library under a different name. (See below for more on named exports)

So when a library developer exports functions or whatever from their library, they write something like:

export const someFunc = () => {};
export const someOtherFunc = () => {};
export const someThirdFunc = () => {};

These are called "named exports." They're what you're importing when you write something like

import { someFunc } from 'some-library';

So what as does it lets you import that named export under a new name you've chosen.

import { someFunc as somePreferredName, someOtherFunc as someOtherPreferredName, someThirdFunc } from 'some-library';

You can also import every named import into a single object like so:

import * as someLibrary from 'some-library';

Then you can do something like someLibrary.someFunc();

Or you can import the "default export." What exactly the default export contains is determined by the library's author, but usually the default export is equivalent to the syntax in the prior section of this answer.

So in the case of React, the two lines below are equivalent:

// import React from 'react';
import * as React from 'react'; // Imports every named export of 'react' and put it into an object named React.

Bringing it all together

It's important to note that React in particular requires you to import the default export. This is not an ES6 import thing, it's a React v16.x requirement. For other packages you can import just a piece and it will function as intended.

Lodash is an easier example. For Lodash, importing the default export is equivalent to importing everything.

// Import the named export "debounce" from 'lodash' into a variable of the same name
import { debounce } from 'lodash';



// Imports the named export "debounce" from 'lodash' into a variable of your chosen name
import { debounce as anyNameYouWant } from 'lodash' 



// Imports the default export of 'lodash' into the object named anyNameYouWant
import anyNameYouWant, { debounce } from 'lodash'; // And then additionally, imports debounce into a variable of the same name

Note that there is no 'as' keyword with default imports. They're not named exports, so when you import them, you're always choosing the name. That's what as allows you to do, but for named exports.

I'm not a Javascript expert by any means but I think that is calling for more than one module to be imported.

Example I found from https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Statements/import :

import defaultExport from "module-name";

import * as name from "module-name";

import { export1 } from "module-name";

import { export1 as alias1 } from "module-name";

import { export1 , export2 } from "module-name";

import { foo , bar } from "module-name/path/to/specific/un-exported/file";

import { export1 , export2 as alias2 , [...] } from "module-name";

import defaultExport, { export1 [ , [...] ] } from "module-name";

import defaultExport, * as name from "module-name";

import "module-name";

var promise = import("module-name");