JavaScript import语句中as关键字的用法 react-router-dom导入场景解析

针对你提到的导入语句 import {BrowserRouter as Router, Route, Switch} from "react-router-dom"，实际完成3个独立的命名导入绑定：

• 仅BrowserRouter被设置本地别名Router，Route、Switch两个组件均为直接按原命名导入
• 不存在“as给后续所有导入项统一设别名”的效果，也不存在“Route、Switch从别名Router对应的BrowserRouter实例上导入”的层级关系，三个导入的源都是同一个react-router-dom模块

ES模块命名导入的语法规范里，as的生效范围仅局限于它紧邻的单个导入条目，和逗号分隔的其他导入项完全独立：

• 每个被逗号拆分的导入条目都是独立单元，标准格式为 [模块对外暴露的原始导出名] as [当前文件可使用的本地名称]
• 若某个条目未书写as关键字，默认本地使用名和模块原始导出名完全一致，等价于隐式执行原名称 as 原名称
• 所有导入项的别名配置互不影响，不存在全局别名作用的逻辑

对应代码的拆分校验 #

按逗号把原导入语句拆分为三个独立条目后，每个条目的行为完全可追溯：

• BrowserRouter as Router：从react-router-dom导入BrowserRouter组件，当前文件内统一用Router指代它
• Route：从react-router-dom导入Route组件，当前文件内直接用Route指代它
• Switch：从react-router-dom导入Switch组件，当前文件内直接用Switch指代它

可以对比参考的全别名写法示例：
import {BrowserRouter as Router, Route as AppRoute, Switch as AppSwitch} from "react-router-dom"
该写法里三个导入项各自配置独立别名，和语法规则完全匹配，不会出现单个as影响全局导入项的情况。

内容的提问来源于stack exchange，提问作者Abraham