What does it mean when you import something as multiple? so for example,

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

This is just an example from react router and the javascript documentation only shows example of one declaration after 'as'

It looks like it's importing BrowserRouter as Router, Route and Link so all three variables referred to the same library. If I am right, why would you ever want to do that?

So is it the same as var Router, Route, Link = require('react-router-dom').BrowserRouter();?

What does it mean when you import something as multiple? so for example,

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

This is just an example from react router and the javascript documentation only shows example of one declaration after 'as'

It looks like it's importing BrowserRouter as Router, Route and Link so all three variables referred to the same library. If I am right, why would you ever want to do that?

So is it the same as var Router, Route, Link = require('react-router-dom').BrowserRouter();?

• javascript
• reactjs

4 Answers 4

The statement

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

selectively imports BrowserRouter, Route and Link from react-router-dom. The as Router statement makes BrowserRouter available under the name Router (instead of BrowserRouter). The names of Route and Link are not changed.

It is equivalent to:

const Router = require("react-router-dom").BrowserRouter;
const Route = require("react-router-dom").Route;
const Link = require("react-router-dom").Link;

No it is not at all like that! It's a harmony feature that was added to the Import/Export functionality.

It's the same as this:

let tmp = require("react-router-dom")
let Router = tmp.BrowserRouter
let Route = tmp.Route
let Link = tmp.Link

Or simply:

const {BrowserRouter: Router, Route, Link} = require("react-router-dom")

The keyword as in an import statement allows you rename the module you're importing. It would be equivalent to the following:

let Router = require("react-router-dom").BrowserRouter
let Route = require("react-router-dom").Route
let Link = require("react-router-dom").Link

Import is ES6 new syntax, in your example, it's loading three class from module 'react-router-dom', the name for BrowserRouter is too long, so you can use an alias for it, which called Router.

import { member1 , member2 as alias2 , [...] } from "module-name";

The monJS equivalent syntax will be:

var Router = require('react-router-dom').BrowserRouter,
    Route = require('react-router-dom').Route,
    Link = require('react-router-dom').Link;

I attached a link below: you will find more details.

import syntax documentation