What is 'import as'?

Question

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>
    
    );
  }

Answer 1

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.