Mac M1 尝试导入错误：“Switch”未从“react-router”导出

Question

在 Windows 上，npm run start 可以正常工作，但在 m1 上 npm run start 会出错。
您为什么要这样做？

Failed to compile
./node_modules/react-router-config/esm/react-router-config.js
Attempted import error: 'Switch' is not exported from 'react-router'.
This error occurred during the build time and cannot be dismissed.

"react-router-dom": "^5.3.0", "react-scripts": "^4.0.1",

这是 app.js 代码。

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import routes from "./Routes";
import {renderRoutes} from "react-router-config";


import theme from './theme';
import {ThemeProvider} from "styled-components";

export default function App() {
    return (
                    <BrowserRouter>
                        {renderRoutes(routes)}
                    </BrowserRouter>
    );
};
``

Answer 1

如果您不小心将 react-router-dom 更新到版本 6，它将不再导出 Switch 组件。它被一个Routes 组件替换，必须直接包装/渲染Route 组件。

1. 将Switch 替换为Routes 组件。

   import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
   ...
   
   function App() {
     return (
       <Router>
         <Routes>
           <Route path="/" element={<Home/>} />
         </Routes>
       </Router>
     );
   }
   

   按照Upgrading from v5 将您的项目从 v5 迁移到您的应用程序中的 v6，因为有很多重大的组件 API 更改。

2. 恢复到react-router-dom v5。

   • 运行npm un -s react-router-dom
   • 运行npm i -s react-router-dom@5.3.0

Answer 2

问题好像是react-router-dom的版本问题你写的代码好像和version 5兼容，你安装的包很可能是version 6。请检查。

在version 6

1. Switch 替换为 Routes
2. 路由的默认行为是匹配确切的路由。
3. component={Loader} 现在必须写为 element={<Loader />}
4. useHistory 替换为 useNavigate。
5. 我们列出路线的顺序无关紧要。该算法现在选择最佳匹配。

升级到 v6 的步骤

npm uninstall react-router-dom

npm install react-router-dom@6

然后按照下面提到的教程对代码进行更改。它应该开始正常工作了。

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

function App() {
  return (
    <Router basename={process.env.PUBLIC_URL}>
      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="/dashboard" element={<Dashboard/>} />
        <Route path="/*" element={<NotFoundPage/>} />
      </Routes>
    </Router>
  );
}

另外，使用basename={process.env.PUBLIC_URL} 通过.env 文件设置公共网址是一个好习惯。

解决这个问题的另一种方法

另一种方法是恢复到版本 5，但我强烈建议您升级到版本 6，因为它提供了更小的包大小、更好的路由选择、改进的编码风格和更直观的嵌套编码方式路线。

参考文献

1. Upgrading to v6 Guide
2. Upgrading to v6 Tutorial