React JS项目因react-router-dom导入错误出现Unexpected token等多类报错

• 语法解析报错（Unexpected token）：react-router-dom 采用命名导出机制，不存在默认导出入口，你尝试拆分命名导出为独立默认导入的写法本身就不符合ES模块语法：
  • 写import Route from 'react-router-dom'会把整个react-router-dom模块对象赋值给Route变量
  • 写import BrowserRouter as Switch from 'react-router-dom'同时给导入的内容定了两个别名，直接触发语法解析失败
• "You should not use outside a "报错：路由规则强制要求所有<Route>组件必须被包裹在<Router>类组件（BrowserRouter/HashRouter）内部，你之前将<Route>作为最外层包裹元素，完全颠倒了嵌套层级。
• "Element type is invalid"报错：导入方式错误导致拿到的Route/Switch变量是模块对象，不是可渲染的React组件函数/类，触发了React组件类型校验失败。
• 变量重复声明报错：你在文件中已经用const routing定义过一次路由配置变量，后续又追加了一行export const routing做重复同名声明，直接触发语法错误。
• 你最初编写的命名导入语句import { Route, BrowserRouter as Router, Switch } from 'react-router-dom' 本身没有语法问题，之前触发的连锁报错和导入语句无关，是组件嵌套层级错误导致的，不需要随意拆分导入逻辑。

• 统一使用标准的命名导入写法，不要尝试拆分导入react-router-dom的模块：
  import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
• 调整组件嵌套层级：最外层用Router做全局路由容器，内部按顺序放置公共Header、路由匹配区Switch、公共Footer，修正之前错把Route当最外层容器的层级错误。
• 删除重复声明的routing变量行，不要在已定义常量后追加同名的重复导出语句。

可直接运行的完整index.js代码 #

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorkers from './serviceWorker';
import './index.css';
import {
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom';
import App from './App';
import Header from './components/Header';
import Footers from './components/Footers';

const routing = (
  <Router>
    <React.StrictMode>
      <Header />
      <Switch>
        <Route exact path='/' component={App} />
      </Switch>
      <Footers />
    </React.StrictMode>
  </Router>
);

ReactDOM.render(routing, document.getElementById('root'));
serviceWorkers.unregister();

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