React Link 抛出 TypeError：赋值的右侧无法解构

Question

出于学习目的，我正在尝试运行一个简单的路由器。目前，我编写的应用程序可以编译，但一旦页面加载，浏览器就会抛出错误。

类型错误：赋值的右侧无法解构

import { BrowserRouter, Routes, Route, Router, Link, Redirect, withRouter } from 'react-router-dom';

class Dashboard extends React.Component {
  render() {
    return (<div><h2>Hi, I am Dashboard!</h2><Link to="/project" className="btn btn-primary">Project</Link></div>);
  }
}

class Project extends React.Component {
  render() {
    return (<div><h2>Hi, I am a Project!</h2></div>);
  }
}

    <Router basename="/client">
      <Route exact path="/dashboard" component={Dashboard} />
      <Route path="/project" component={Project} />
    </Router>

class App extends Component {
  render() {
     return(
       <div>Main
         <Dashboard/>
      </div>
     );
  }
}

export default App;

如果我删除

Link

，页面加载正常，但我无法导航。

请告知为什么会抛出错误。

Answer 1

1. 我认为你可以使用 BrowserRouter 作为 Router 来自 react-router-dom 并用该路由器包装您的应用程序组件。
2. 您可以将现有的 Router 替换为 react-router-dom 中的 Routes，确保您将使用 element={} 而不是 component