用ChatGPT解决这个技术问题 Extra ChatGPT

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

我不知道为什么会收到此错误，也无法在任何地方找到答案。我已经卸载了 react-router-dom 包并重新安装了它，但它仍然告诉我 switch 模块不是从 react-router-dom 导出的。这是我的代码。

我得到的错误：

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

代码 

import React from 'react';
import './App.css';
import NavBar from './components/navbar.js';
import Footer from './components/footer.js';
import Home from './components/pages/homepage/home.js';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="app-container">
        <NavBar />
        <Switch>
          <Route path="/home" component={Home} />
        </Switch>
        <Footer />
      </div>
    </Router>
  );
}

export default App;
可能是服务工作者的缓存问题。尝试 ctrl+f5 或以隐身模式浏览
仅供参考：这是关于 withRouter 未导出的问题：stackoverflow.com/q/66465750/630364

P
Peter Mortensen

在 react-router-dom v6 中，“Switch”被路由“Routes”取代。您需要从 

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

至 

import { Routes ,Route } from 'react-router-dom';

您还需要更新 Route 声明 

<Route path="/" component={Home} />

至 

<Route path='/welcome' element={<Home/>} />

在 react-router-dom 中，您也不需要在 Route 声明中使用确切的。

有关详细信息，您可以访问官方文档：upgrade to react-router-dom v6

注意Home到<Home/>的变化，我第一眼没注意到。
他们应该更新他们的文档，因为这在任何地方都没有提到！
哦耶，我喜欢那些只会让用户感到困惑的毫无意义的 API 更改……
在 react-router-dom ^6.1.0 中工作
有谁知道对 react-router-dom 进行这些更改的理由？
M
Mario Petrovic

如果您使用的是 react-router-dom v6，看起来 Switch 已替换为 Routes

J
Jean Leon

这是使用 react-router-dom V6 的示例 

import React from 'react'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'

import '../styles/global.css'

import Layout from '../containers/Layout'
import Home from '../pages/Home'
import Login from '../containers/Login'
import RecoveryPassword from '../containers/RecoveryPassword'
import NotFound from '../pages/NotFound'

const App = () => {
  return (
    <Router>
      <Layout>
        <Routes>
          <Route exact path="/" element={<Home/>}/>
          <Route exact path="/login" element={<Login/>}/>
          <Route exact path="/recovery-password" element={<RecoveryPassword/>}/>
          <Route path="*" element={<NotFound/>}/>
        </Routes>
      </Layout>
    </Router>
  );
}

export default App;
在确切的路线内抛出错误@jean
这对我不起作用。它说它找不到“路线”。所有其他位导入正常。我使用的 react-router-dom 是 6.2.1
如果您使用 typescript，您会发现在 v6 中不再需要精确，因为它是默认的。标准 JavaScript 只是忽略了额外的参数，但 TypeScript 会抱怨。
P
Peter Mortensen

我也面临同样的问题，我在网上搜索了很多，但根据我的问题我没有得到任何答案。

所以我卸载了react-router-dom的版本6： 

npm uninstall react-router-dom

并安装了 react-router-dom 5.2.0 版本： 

npm install react-router-dom@5.2.0
这项工作完美无缺，在所有答案中，这是将 react-router-dom 降级到 5.2.0 的最简单方法，但在我看来，我们还需要了解新语法。谢谢
P
Peter Mortensen

语法已更改

旧语法 

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

<Switch>
    <Route path="/home" component={Home} />
</Switch>

新语法： 

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

<Routes>
    <Route path="/home" element={<Home/>} />
</Routes>
Redirect 呢？
@AzharUddinSheikh 他们用 Navigate 替换了 Redirect
我喜欢你提到旧语法和新语法，这有助于我理解变化
E
Emmaccen

如果您使用的是 react-router-dom 版本 6，请使用此

此外，请参阅此处以供参考：https://reactrouter.com/docs/en/v6/upgrading/v5#:~:text=single%20route%20config%3A-,//%20This%20is%20a%20React%20Router%20v6%20app,%7D,-This%20step%20is 

// This is a React Router v6 app
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  Outlet
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users" element={<Users />}>
          <Route path="me" element={<OwnUserProfile />} />
          <Route path=":id" element={<UserProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Outlet />
    </div>
  );
}
组件不起作用，但元素起作用。这在 2022 年对我有用。
P
Peter Mortensen

在 react-router-dom v6 中，Switch 已被替换为 Routes。使用这种格式： 

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

<Router>
    <Routes>
        <Route exact path="/" component={component} />
        <Route exact path="/path2" component={component2} />
        <Route exact path="/path3" component={component3} />
    </Routes>
</Router>
谈论在关键时刻救我。谢谢！
"react-router-dom": "^6.2.2" 不支持路由组件上的道具 component。
P
Peter Mortensen

react-router-dom 已更新到版本 6。现在他们已将 <Switch/> 组件重命名为 <Routes/>。也有很多变化。

您应该花一些时间阅读文档。这是 react-router-v6-doc 的链接。

我遵循了 v5 的快速指南并得到了同样的错误。 v6 文档在这里：github.com/remix-run/react-router/blob/main/docs/…
M
Mateo Verdaguer

我能够通过从 Switch 更改为 Routes 来修复它所以你应该有这样的东西： 

<Routes>
  <Route path='/home' element={<Home/>} />
</Routes>

并且您还需要将 imort 从 Switch 更改为 Routes： 

import { Routes, Route } from "react-router-dom";
P
Peter Mortensen

<Switch> 替换为 <Routes>

前： 

import { Route, Switch} from 'react-router'

<Router>
    <Switch>
        <Route />
        <Route />
    </Switch>
</Router>

现在： 

import { Route, Routes} from 'react-router'

<Router>
    <Routes>
        <Route />
        <Route />
    </Routes>
</Router>

只需使用 Routes 而不是 Switch。

P
Peter Mortensen

从改变 

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

<Switch>
    <Route path="/home" component={Home} />
</Switch>

至 

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

<Routes>
    <Route path="/home" element={ <Home />} />
</Routes>
U
Usama Tayyab

在 react-router-dom v6 Switch 被替换为 Routes

和带有元素的组件

{componentName} 与 {}

正如目前所写的那样，您的答案尚不清楚。请edit添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。您可以找到有关如何写出好答案的更多信息in the help center。
B
Broda Noel

您必须先检查 npm 包版本。要检查，请运行 npm info react-router-dom version。

如果包版本 >= 6.0.0，则必须更改 

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

至 

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

也必须改变 

<Route path="/home" component={Home} />

至 

<Route path="/home" element={<Home/>} />
P
Peter Mortensen

我通过更改渲染路线以使用 element 的方式解决了我的错误。

至： 

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { Home } from "./app";
import { Login, Register } from "./auth";
const R: React.FC = () => {
  return (
    <Router>
      <Routes>
        <Route path="/login" caseSensitive={false} element={<Login />} />
        <Route path="/register" caseSensitive={false} element={<Register />} />
        <Route path="/" caseSensitive={false} element={<Home />} />
      </Routes>
    </Router>
  );
};
export default R;

基本上在 v6.* 之前： 

import React from "react";
import { BrowserRouter as Router, Route, Switch} from "react-router-dom";
import { Home } from "./app";
import { Login, Register } from "./auth";
const R: React.FC = () => {
  return (
    <Router>
      <Switch>
        <Route path="/login">
           <Login />
        </Route>
       <Route path="/register">
           <Register/>
        </Route>

       <Route path="/">
           <Home/>
        </Route>
      </Switch>
    </Router>
  );
};
export default R;

v6.*之后 

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { Home } from "./app";
import { Login, Register } from "./auth";
const R: React.FC = () => {
  return (
    <Router>
      <Routes>
        <Route path="/login" caseSensitive={false} element={<Login />} />
        <Route path="/register" caseSensitive={false} element={<Register />} />
        <Route path="/" caseSensitive={false} element={<Home />} />
      </Routes>
    </Router>
  );
};
export default R;
k
known-as-bmf

Switch 是从 react-router 而不是 react-router-dom 导出的（我认为 Route 也是如此）。

React Router Dom 有自己的组件和 API reactrouter.com/web/guides/quick-start - 这是一个 github 问题来详细说明“差异”github.com/ReactTraining/react-router/issues/4648
@kJs0 你是对的，我忘记了 react-router-dom 从 react-router 重新导出所有内容。
这实际上确实解决了我的错误，我安装了 react-router 包并通过 react-router 导入了它，但现在我收到另一个错误，指出“错误：不变失败：您不应该在 之外使用 ”，当我的交换机肯定在路由器内部时？哈哈
确保两个版本完全相同 react-router & react-router-dom
P
Peter Mortensen

写 <Routes> 而不是 <Switch>。

在终端中运行： 

npm install --save react-router react-router-dom

这对我有帮助。或者检查文件 package.json 并在 "react-dom": "^17.0.2", 之后添加以下内容： 

 "react-router": "^6.0.0",
A
Abebe Kayimo

如果您使用的是 react-router-dom v6，则必须将 Switch 更改为 Routes，如下例所示：

import { Switch, ... } from 'react-router-dom'; 而不是导入 Switch

导入路线 import { Routes, ...} from 'react-router-dom';

然后，而不是使用 component = {ComponentName}, use element={<ComponentName/>}，如下所示： 

import { Routes, Route, ...} from 'react-router-dom';
    .
    .
    .  
    <Routes>
      <Route exact path='/' element={<Home/>}></Route>
    </Routes>
D
Deep

如果您使用的是 react-router-dom 版本 6，则需要将 Switch 更新为 Routes。以下语法对我有用： 

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import './App.css';
import Home from './components/Home';

function App() {
  return (
    <div>
      <Router>
        <Routes>
          <Route path="/" exact element={<Home />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;
P
Peter Mortensen

你的 react-router-dom 版本是什么？ 

"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",

如果它高于 1，那么您需要删除节点模块并使用 npm install --save 重新安装节点模块。

P
Peter Mortensen

我遇到过同样的问题。在项目终端上，键入以下命令。您无需对代码进行任何更改。

npm 卸载 react-router-dom npm 安装 react-router-dom@5.2.0

我永远不会建议降级。尤其不是重大降级。可能是一个快速修复，但它很脏。
P
Peter Mortensen

Switch已被Routes取代

来源更新路由（react-router-dom 语法）#1386（howtographql GitHub）

https://i.stack.imgur.com/rXUMA.png

A
Anon17 
/*Step 1: Step 1. Upgrade to React 16.8+ and react-router-dom v5.2

    npm uninstall react-router-dom
    npm install react-router-dom@5.2

/*Step 2: Update the react-router-dom import statement.*/
//Change import { Switch, Route } from "react-router-dom";
//to

    import { Routes ,Route } from 'react-router-dom';

/*Step 3: Upgrade the syntax and replace "Switch" with "Routes" and "component" with "element" */
//Change

    // <Switch>
    //          <Route path="/home" component={HomePage} />
    // </Switch>

//to
 

    <Routes>
              <Route path="/home" element={<HomePage/>} />
    </Routes>

//Alternatively you can also downgrade the react-router-version as suggested in other solutions,
//However, rather than going backwards, I would suggest to upgrade to latest version of react-router-dom and its syntax.
R
Romil Jain 
import {
      BrowserRouter as Router,
      Routes,
      Route,
      Link
    } from "react-router-dom";
    
    function App() {
      return (
        <>
        <Router className="App">
          <Navbar/>
          <Routes>
            <Route path='/'>
    
            </Route>
          </Routes>
        </Router>
        </>
      );
    }
    
    export default App;
P
Peter Mortensen

一个解法：

删除 node_modules 文件夹。在 package.json 文件中，将 react-router-dom 版本（在我的例子中为版本 6）更改为 "react-router-dom": "^5.2.1"

然后在终端运行：

npm install 安装依赖项，然后运行 npm start 重新启动

P
Peter Mortensen

我解决了这样的问题： 

yarn add react-router-dom@5,3,0
P
Peter Mortensen

这实际上不是您或 React 或您的代码的问题。这只是 react-router-dom 的更新版本。用路由替换 Switch。

而已。只需使用 Routes 而不是 Switch，它就可以正常工作。

M
Madhav

在 react-router-dom v6 中，switch 被 Routes 取代。下面是配置 react-router-dom v6 的简单示例。 

import * as React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Layout from './components/Layout';
import ProtectedRoute from './components/ProtectedRoute';
import LoginPage from './pages/LoginPage';
import WizardPage from './pages/WizardPage';
import RequestsPage from './pages/RequestsPage';

import './App.scss'

export class App extends React.Component {
    public render() {
        const sharedRouteProps = { exact: true, authenticationPath: '/login' };
        const wizardRouteProps = { ...sharedRouteProps, path: "/", component: WizardPage };
        const requestsRouteProps = { ...sharedRouteProps, path: "/requests", component: RequestsPage };

        return (
            <Layout>
              <Router>
                <Switch>
                    <Route exact path='/login' component={LoginPage} />
                    <ProtectedRoute {...wizardRouteProps} />
                    <ProtectedRoute {...requestsRouteProps} />
                </Switch>
              </Router>
            </Layout>
        );
    }
}
y
yaach

安装 react-router-dom v6.0.2 后出现此错误。

用路由替换 Switch 解决了这个问题： 

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

如果您使用的是较新版本的 react-router-dom（例如，在我的例子中为 ^6.2.1），您应该将 <Switch> 更改为 <Routes> 并将 <Route> 与 component={<SampleComponent />} 参数一起使用。

特别是下面的代码示例： 

import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import MyComponent from './containers/MyComponent';

export default function AppRoutes() {
    return (
        <Routes>
            <Route exact path="/" component={<MyComponent />}>
            </Route>
        </Routes>
    );
}
P
Peter Mortensen

如果您安装了 react-router 和 react-router-dom v6 beta，只需像这样卸载： 

npm uninstall --save react-router react-router-dom

并安装它： 

npm install --save react-router react-router-dom

它将安装非测试版的最新版本。

然后我们只需要重新启动 Visual Studio Code 或您处理它的任何文本编辑器。

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

想领先一步获取最新的外包任务吗？

立即订阅

HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。

简体中文 English

平台

支持

联系我们

在使用过程中有任何问题或建议，可以通过以下方式联系我们：

微信公众号: 火星来客

Email: huntsbot@xinbeitime.com

Copyright© 2022-2023 www.huntsbot.com 浙ICP备2022000860号-4 All Rights Reserved.