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();
?
4 Answers
Reset to default 6The 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