javascript - What does 'as' mean when importing a module? - Stack Overflow

admin管理员组

文章数量:1318564

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

Share Improve this question Follow edited Jan 24, 2019 at 2:07 grooveplex 2,53944 gold badges2929 silver badges3030 bronze badges asked Mar 20, 2017 at 18:34 forJforJ 4,62766 gold badges3939 silver badges6868 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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

本文标签： javascriptWhat does 39as39 mean when importing a moduleStack Overflow