export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom’

import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

export default () => {
  <div>
    <Switch>
      <Route exact path="/" component={Home}></Route>
      <Route exact path="/about" component={About}></Route>
    </Switch>
  </div>
}

react-router-dom 从 V5 升级到 V6 后，有些使用做了一些改变：

• Switch 重命名为 Routes

// V5
<Switch>
  <Route exact path="/" component={Home}></Route>
  <Route exact path="/post" component={Post}></Route>
</Switch>
// V6
<Routes>
  <Route exact path="/" component={Home}></Route>
  <Route exact path="/post" component={Post}></Route>
</Routes>

• Route 的新特性变更 ，component/render 被 element 替代

// V5
<Switch>
  <Route exact path="/" component={Home}></Route>
  <Route exact path="/post" component={Post}></Route>
</Switch>
// V6
<Routes>
  <Route exact path="/" element={Home}></Route>
  <Route exact path="/post" element={Post}></Route>
</Routes>

• useNavigate代替useHistory

// V5
import { useHistory } from 'react-router-dom';

function exitButton() {
  const history = useHistory();
  function handleClick() {
    history.push('/exitLogin');
  };
  return <button onClick={handleClick}>Exit</button>
}

// V6
import { useNavigate } from 'react-router-dom';

function exitButton() {
  const navigate = useHistory();
  function handleClick() {
    navigate('/exitLogin')
  };
  return <button onClick={handleClick}>Exit</button>
}