javascript as keyword, multiple names after "as" in import

Question

I noticed this import in a javascript file

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

from my past experience I could see the as keyword being used to create alias for imported module.

So does this simply import Router, Route, Switch modules? or does it use those words as aliases for BrowserRouter? how is the as keyword being used here?

Answer 1

The as only applies to BrowserRouter. The other two (Route and Switch) are unaffected.

That import is identical to this:

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

or this, for that matter: :-)

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

It's importing three named exports from the module "react-router-dom":

• BrowserRouter (using the local name Router to refer to it in the module's code)
• Route (using the same name for the local identifier)
• Switch (using the same name for the local identifier)