我遇到这个错误:”xport ‘Switch’(导入为’Switch’)在’react-router-dom’中未找到”

huangapple go评论62阅读模式
英文:

I have this error: " xport 'Switch' (imported as 'Switch') was not found in 'react-router-dom' "

问题

我有 react-dom 版本 ^18.2.0。

导入 Home 组件:
import Home from "./Home";

导入 Navebar 组件:
import Navebar from "./Navbar";

导入路由相关的组件:

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

App 组件的代码如下:

function App() {
  return (
    <Router>
      <div className="App">
        <Navebar/>
        <div className="content">
          <Switch>
            <Route path="/">
              <Home />
            </Route>
          </Switch>
        </div>
      </div>
    </Router>
  );
}

export default App;
英文:

** I have react-dom v^18.2.0**
>And My Code:

import Home from "./Home";
import Navebar from "./Navbar";

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

function App() {

  
  return (
    &lt;Router&gt;
      &lt;div className=&quot;App&quot;&gt;
        &lt;Navebar/&gt;
        
        &lt;div className=&quot;content&quot;&gt;
          &lt;Switch&gt;
            &lt;Route path=&quot;/&quot;&gt;
              &lt;Home /&gt;
            &lt;/Route&gt;
          &lt;/Switch&gt;
        &lt;/div&gt;
        
      &lt;/div&gt;
    &lt;/Router&gt;
  );
}

export default App;

答案1

得分: 0

Here is the translated content:

如果您正在使用 react-router-dom 版本6或更高版本,应该使用 Routes 替代 Switch

import Home from "./Home";
import Navbar from "./Navbar";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <div className="content">
          <Routes>
            <Route path="/">
              <Home />
            </Route>
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

请根据 react-router-dom 从版本5升级到版本6的文档进行更新:

文档链接

英文:

if your using react-router-dom v6 or greater than in place of Switch use Routes :-

import Home from &quot;./Home&quot;; import Navebar from &quot;./Navbar&quot;;
import { BrowserRouter as Router, Route, Routes} from &quot;react-router-dom&quot;;

function App() {

  return (
&lt;Router&gt;
  &lt;div className=&quot;App&quot;&gt;
    &lt;Navebar /&gt;
    &lt;div className=&quot;content&quot;&gt;
      &lt;Routes&gt;
        &lt;Route path=&quot;/&quot;&gt;
          &lt;Home /&gt;
        &lt;/Route&gt;
      &lt;/Routes&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/Router&gt;
  );
}

export default App;

please follow react-router-dom updating documentation from v5 to v6 :-

> doc-link

huangapple
  • 本文由 发表于 2023年4月17日 09:17:16
  • 转载请务必保留本文链接:https://go.coder-hub.com/76031117.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定