相关疑难解决方法(0)

我不知道为什么会收到此错误，并且在任何地方都找不到答案。我已经卸载了该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;

我在更改视图以响应路由时遇到问题.似乎我已经尝试了所有我可以谷歌没有运气.我只想显示用户列表,点击每个用户应导航到详细信息页面.这是路由器:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import Users from "./components/Users";
import { Router, Route } from "react-router";
import Details from "./components/Details";

ReactDOM.render((
  <BrowserRouter>
    <div>
        <Route path="/" component={Users} />
        <Route path="/details" component={Details} />
    </div>
  </BrowserRouter>
), document.getElementById('app'))

当我使用网址/详细信息时,我的浏览器会导航到该网址,但不会更改视图.任何其他路线抛出404所以它似乎识别路线但不更新.

“链接”无法正常工作。请任何人解决这个问题。我尝试了很多方法但没有一个有效。当我点击主页或关于时，它不会移动到另一侧，我必须手动重新加载这一侧。

header.js

import { Link } from "react-router-dom";
<Link className="nav-link active" aria-current="page" to="/">Home</Link>
<Link className="nav-link" to="/about">About</Link>

应用程序.js

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
<Router>
    <Header title="My Todos List" />
    <Switch>
      <Route
        exact
        path="/"
        render={() => {
          return (
            <>
              <AddTodo addTodo={addTodo} />
              <Todos todos={todos} onDelete={onDelete} />
            </>
          );
        }}
      ></Route>
      <Route exact path="/about">
        <About />
      </Route>
    </Switch>
    <Footer />
  </Router>

包.json

{

“名称”：“todos-list”，“版本”：“0.1.0”，“私有”：true，“依赖项”：{“@testing-library/jest-dom”：“^ 5.16.4”，“ @testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^5.3.0", "react-scripts": "5.0.1", …