Switch' 不是从 'react-router-dom' 导出的

Question

在 package.json 文件中添加了 react-router-dom 依赖项。由 BrowswerRouter 包装的应用程序组件，但是当我通过 switch 包装路由时，它说以下错误 Switch’ is notexported from ‘react-router-dom’。我删除了 package.json.lock 节点模块，再次安装 npm 并 npm install @babel/core –save。还是行不通。我成功地为此浪费了 6 个小时。你能帮我解决这个问题吗？为什么不导入？

索引.js

 import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
     <App />
  </BrowserRouter>,
  document.getElementById('root')
);

应用程序.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;

包.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"
  },

原文由 enamul haque 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 react-router v6 中使用 Routes 而不是 Switch

您正在使用 react-router-dom 版本 6，它将 Switch 替换为 Routes 组件

import {
  BrowserRouter,
  Routes, // instead of "Switch"
  Route,
} from "react-router-dom";

// ...

    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>

请注意，您现在还将组件作为 element 传递，而不是使用子组件。

原文由 Joschua Schneider 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果你想使用 Switch 然后安装 react-router-dom 版本 5。开关在 react-router-dom 版本 6 中被替换。

npm install react-router-dom@5

原文由 Taib Islam Dipu 发布，翻译遵循 CC BY-SA 4.0 许可协议