尝试导入错误:'react-router-dom'

我不知道为什么我得到这个错误，我在任何地方都找不到答案。我已经卸载了react-router-dom包并重新安装了它，但它继续告诉我交换模块没有从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;
744639 次浏览
小开

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

小开

如果您正在使用react-router-dom v6，看起来Switch已被Routes取代。

小开

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

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

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

小开

如果你安装了react-router和React-router-dom v6 beta版，就像这样卸载:

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

然后用这个安装:

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

它将安装非beta版的最新版本。

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

小开

我也遇到过同样的问题，我已经删除了react-router-dom，然后重新安装。

出现这个问题是因为我已经将它升级到最新版本，即react-router-dom v6，然后想降级到以前的版本，即v5。

我在Ruby on Rails项目中使用yarn来管理依赖项，你可以使用这个命令来删除和重新安装它:

# EYZ0

# EYZ0

这应该能解决问题。

小开

写<Routes>而不是<Switch>。

在终端中运行:

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

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

 "react-router": "^6.0.0",
小开

在react-router-dom v6中，&;switch &;被routes " routes "取代。您需要更新从的导入

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

来

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

您还需要更新Route声明

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

来

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

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

欲了解更多信息，请访问官方文档: # EYZ0 < / p >

小开

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

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

npm uninstall react-router-dom

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

npm install react-router-dom@5.2.0
小开

我是这样解决的:

yarn add react-router-dom@5,3,0
小开 
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;
小开

这是一个使用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;
小开

改变

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>
小开

如果你正在使用react-router-dom v6，你必须将Switch更改为Routes，如下面的例子所示:

不导入Switch， # EYZ0 < / p > < p >进口路线 # EYZ0 < / p >

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

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

一个解决方案:

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

然后在终端运行:

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

小开

我解决了我的错误，通过改变我渲染我的路线使用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;

# EYZ0后

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;
小开

在安装react-router-dom v6.0.2。后，我得到了这个错误

将开关替换为路线解决了这个问题:

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

语法已经改变

旧的语法

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>
小开

我和杂志海报上的人面临着同样的问题。我尝试了以下所有的方法:

  • 卸载并安装react-router-dom
  • 分别从react-router-dom导入Switch

但对我来说什么都没用。

请遵循以下指示。我相信你不会再得到错误。

正确的代码:

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, Routes, Route, Link } from "react-router-dom";


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


export default App;

注意:Switch已经被替换为Routes，我们需要使用元素而不是component。

小开

Switch已被Routes替换。

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

Enter image description here

小开

如果你正在使用react-router-dom的版本6，那么你需要用Routes更新Switch。下面的语法适合我:

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;
小开
你必须先检查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/>} />
小开

我也面临着这个问题，并最终通过安排代码解决了它。我是React的新手。

以下是我的App.js代码(类基组件):

import logo from './logo.svg';
import './App.css';


import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Navbar from './components/Navbar';
import News from './components/News';
import { BrowserRouter as Router, Route, Routes,Link } from 'react-router-dom'


export class App extends Component {
static propTypes = {


}


render() {
return (
<>
<Navbar/>
<Router>
<Routes>
<Route path="/general"><News pageSize={3} country={'us'} category={'general'}/></Route>
</Routes>
</Router>
</>
)
}
}


export default App
小开

<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>

只需使用路由而不是交换机。

小开

如果你正在使用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>
);
}
小开

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

就是这样。只要使用路由而不是开关，它工作得很好。

小开

我也有同样的问题。在项目终端上，输入以下命令。您不需要对代码进行任何更改。

  1. < p > # EYZ0

  2. < p > # EYZ0

小开

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

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

小开

在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.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>
);
}
小开

在react-router-dom v6 交换机被路由替换。

组件和元素

{componentName}和{}

小开

我能够通过从切换到路由来修复它。 所以你应该有这样的东西:

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

你还需要把import从Switch改成Routes:

import { Routes, Route } from "react-router-dom";
小开

第一步:升级到React 16.8+和React -router-dom v5.2:

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

步骤2:更新react-router-dom导入语句。

将import { Switch, Route } from "react-router-dom";改为:

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

步骤3:升级语法并替换“switch”;与“Routes"和“;component"与“element"

改变

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

来

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

或者，您也可以按照其他解决方案中的建议降低react-router版本。

但是，我建议升级到react-router-dom及其语法的最新版本，而不是倒退。

小开

在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>
);
}
}
小开

你只需要做两件事:

  1. 将Switch替换为路由。
  2. 使用这个Route标签
<Route path="/" element={<Component />} />

而不是这个:

<Route>
path="/"
<Component />
</Route>
小开

如果你使用react-router-dom version6，使用路线代替开关

小开 
import React from "react";
import { Link, BrowserRouter as Router, Route, Routes } from "react-router-dom";
import "./App.css";
import App from "./App";
const RouterPage = () => {
return (
<Router>
<div>
<nav>
<Link to="/">Home</Link>
<Link to="/posts">Posts</Link>
<Link to="/">About</Link>
<Link to="/contact">Contact</Link>
</nav>
<Routes>
<Route exact path="/" element={<App />}></Route>
<Route path="/post" element={<App />} />
<Route path="/about" element={<App />} />
<Route path="/contact" element={<App />} />
</Routes>
</div>
</Router>
);
};

你应该把Switch换成Routes

小开
  1. 在React路由器v6中，我们必须将组件替换为。

  2. 通过执行npm install react-router-dom@latest命令，确保你的项目运行的是最新版本。

  3. 如果你不想更新你的代码，你可以在你的项目根目录下运行npm install react-router-dom@5.2.0来安装react-router-dom的v5版本。

如果你有任何困惑，请观看这个视频寻求帮助:https://www.youtube.com/watch?v=8BVMPyQA7d4


提交答案