React错误＆＃x27; Switch＆＃x27; （导入AS switch＆＃x27;）在React-Router-dom＆＃x27;

Question

import './App.css';
import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/login">
            <Login />
          </Route>
          <Route path="/reset">
            <PasswordReset />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

嗨，我有一个错误。我是第一次运行React应用程序。 在“ react-router-dom”中未找到“开关”（导入为“开关”） 我尝试输入路由器而不是开关，而不是被接受。 我能做些什么？谢谢。

Answer 1

您应该将' react-router-dom '更新为 v6 ，'npm -i- save react-rout-router-dom@6'。
接下来， ..路由器v6 具有新的语法，您应该使用路由而不是 switch 。另外，路线由路线组成，并使用元素而不是组件，示例：

<Routes>
  <Route path='/'>
    <SomeComponent />
  </Route>
  
     or

  <Route path='/' element={<SomeComponent />} />
</Routes>