登录 主页

React react-router-dom 报错:export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'

2024-06-06 09:39AM

在运行React项目的时候报错说:export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'

原因:由于我使用的 react-router-dom 版本是6.17.0,在 react-router-dom v6中,“Switch”已经被路由“Routes”取代,所以需要修改一些的内容:

1.修改导入的内容:

把这下面行代码:

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

修改为:

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

 2.修改路由的声明:

把下面这些内容中的“component”修改为“element”

const routes =[
  {
    path: '/about_me',
    component: <AboutMe/>,
  },
  {
    path: '/blog_list',
    component: <BlogList/>,
  },
  {
    path: '/hi',
    component: <Hi/>
  }
];

 修改后的代码:

const routes =[
  {
    path: '/about_me',
    element: <AboutMe/>,
  },
  {
    path: '/blog_list',
    element: <BlogList/>,
  },
  {
    path: '/hi',
    element: <Hi/>
  }
];

注意:如果你的“function”也使用了路由的“component”,也需要把“component”修改为“element” 

function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to='/blog_list'>Blog List</Link>
          </li>
          <li>
            <Link to='/about_me'>About Me</Link>
          </li>
          <li>
            <Link to='/hi'>hi</Link>
          </li>
        </ul>
        <Routes>
        {
          routes.map(function(route, i) {
            return (
              <Route path={route.path} element={route.component} /> //主要是修改这里的内容
            )
          })
        }
        </Routes>
      </div>
    </Router>
  );
};

export default App;

修改后的内容:

function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to='/blog_list'>Blog List</Link>
          </li>
          <li>
            <Link to='/about_me'>About Me</Link>
          </li>
          <li>
            <Link to='/hi'>hi</Link>
          </li>
        </ul>
        <Routes>
        {
          routes.map(function(route, i) {
            return (
              <Route path={route.path} element={route.element} />
            )
          })
        }
        </Routes>
      </div>
    </Router>
  );
};

export default App;

 不然页面无法加载路由组件里面的内容。

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论