[英]Switch' is not exported from 'react-router-dom'
In package.json file react-router-dom dependencies added.在 package.json 文件中添加了 react-router-dom 依赖项。 App component wrapped by BrowswerRouter, but when I wrap route by switch it says the following error Switch' is not exported from 'react-router-dom'.
由 BrowswerRouter 包装的应用程序组件,但是当我通过 switch 包装路由时,它说以下错误 Switch' is notexported from 'react-router-dom'。 I deleted the package.json.lock,node modules, installed npm again and npm install @babel/core --save.
我删除了 package.json.lock,node modules,再次安装 npm 和 ZBB30E85411B446DF41296726 Still not working.
还是行不通。 I successfully wasted 6 hour for this.
我成功地为此浪费了 6 个小时。 Can you please help me to fix this?
你能帮我解决这个问题吗? why it's not importing?
为什么不导入?
Index.js索引.js
import {BrowserRouter} from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
App.js:应用程序.js:
import logo from './logo.svg';
import './App.css';
import React from 'react';
import {Switch,Route,Link} from 'react-router-dom';
import Home from './Home';
class App extends React.Component {
componentDidMount(){
alert('mounting');
}
componentDidUpdate(){
alert('updated');
}
render(){
return (
<div className="App">
<div>
<Link to="/">Home</Link>
</div>
<hr />
<Switch>
<Route exact path="/">
<Home/>
</Route>
</Switch>
</div>
);
}
}
export default App;
import React from 'react';
const Home = () => {
return <h1>Home</h1>;
};
export default Home;
package.json package.json
"dependencies": {
"@babel/core": "^7.16.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^6.0.0",
"react-router-dom": "^6.0.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
Users will not be able to find Switch in react-router-dom
.用户将无法在
react-router-dom
中找到 Switch。 They need to install versions up to 5 or below 5. Try the below one, which will work.他们需要安装最高 5 或低于 5 的版本。试试下面的一个,它会工作。 If the user uses routes instead of Switch, it may not work.
如果用户使用路由而不是 Switch,它可能不起作用。
npm install react-router-dom@5
Routes
instead of Switch
in react-router v6Routes
而不是Switch
You are using react-router-dom
version 6, which replaced Switch with the Routes component您正在使用
react-router-dom
版本 6,它将Switch 替换为 Routes 组件
import {
BrowserRouter,
Routes, // instead of "Switch"
Route,
} from "react-router-dom";
// ...
<BrowserRouter>
<Routes>
<Route exact path="/" element={<Home />}>
<Home/>
</Route>
</Routes>
</BrowserRouter>
Note that you now also pass your component as the element
prop instead of using children.请注意,您现在也将您的组件作为
element
prop 传递,而不是使用子组件。
如果您想使用Switch
请安装 react-router-dom 版本 5。在 react-router-dom 版本 6 中替换了 Switch。
npm install react-router-dom@5
我试试这个,react-router-dom 的版本是“^5.3.0”,但仍然显示 Switch' 不是从 'react-router-dom' 导出的消息
I've also run into this error, somehow my React import was removed.我也遇到了这个错误,不知何故我的 React 导入被删除了。 So maybe you just have to see if you have imported react or not.
所以也许你只需要看看你是否已经导入了 react 。
You are using react-router@v6 which uses "Routes" instead of Switch.您正在使用 react-router@v6,它使用“Routes”而不是 Switch。 solution: -Replace "Switch" with "Routes" or -Downgrade your react-router to v5 using npm install react-router-dom@5
解决方案:-将“Switch”替换为“Routes”或-使用 npm install react-router-dom@5 将您的 react-router 降级到 v5
check https://reactrouter.com/docs/en/v6/upgrading/v5#upgrade-all-switch-elements-to-routes检查https://reactrouter.com/docs/en/v6/upgrading/v5#upgrade-all-switch-elements-to-routes
WHYYYYYYYYYYYY??????为什么?
these changes do nothing but add confusion这些变化只会增加混乱
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.