React项目控制台报错如何解决？已尝试重装相关依赖无效

问题背景 #

尝试解决React项目控制台报错已有一段时间但未成功，已删除并重装react-dom、react-router和react-router-dom。作为React新手，目前卡在这个问题上，需要可行的解决方案。

项目代码 #

App.js代码 #

import { toast, ToastContainer } from 'react-toastify';
import React, { Component } from 'react';
import { Router, Route, Routes } from 'react-router-dom';
import './App.css';
import Home from './Components/Home/home';
import Profile from './Components/Profile/profile';
import SidePanel from './Components/SidePanel/sidePanel';
import SignIn from './Components/Signin/signin';
import Signup from './Components/Signup/Signup';


class App extends Component {
  showToast = (type, message) => {
    switch (type) {
      case 0:
        toast.warning(message)
        break;
      case 1:
        toast.success(message)
      default:
        break;
    }
  }
  render(props) {
    return (< Router >
      <ToastContainer
        autoClose={2000}
        hideProgressBar={true}
        position={toast.POSITION.TOP_CENTER}
      />
      <Routes>
        <Route
          exact
          path="/"
          render={prop => <Home {...props} />}
        />
        <Route
          path="/signin"
          render={prop => <SignIn showToast={this.showToast} {...props} />}
        />
        <Route
          path="/signup"
          render={prop => <Signup showToast={this.showToast} {...props} />}
        />
        <Route
          path="/profile"
          render={prop => <Profile showToast={this.showToast} {...props} />}
        />
        <Route
          path="/chat"
          render={prop => <SidePanel showToast={this.showToast} {...props} />}
        />
      </Routes>
    </Router>
    );
  };
};

export default App;

引入的CDN脚本 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

控制台报错信息 #

核心错误为Uncaught Error: useHref() may be used only in the context of a <Router> component，同时存在React版本与路由依赖不兼容的问题。

解决方案 #

1. 版本匹配修复 #

你当前使用的React版本是16.6.3，需根据路由版本做对应调整：

• 若继续使用React 16.6.3，安装兼容的react-router-dom v5：

  npm uninstall react-router-dom
  npm install react-router-dom@5.3.0
  

• 若升级React以兼容react-router-dom v6，需升级到16.8.0+（支持Hook）：

  npm install react@^16.8.0 react-dom@^16.8.0
  

2. 路由代码适配 #

适配react-router-dom v5

• 用<Switch>替代<Routes>组件
• 根路径需保留exact实现精确匹配
• 使用BrowserRouter替代Router（无需手动传入history）

修改后的App.js：

import { toast, ToastContainer } from 'react-toastify';
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import './App.css';
import Home from './Components/Home/home';
import Profile from './Components/Profile/profile';
import SidePanel from './Components/SidePanel/sidePanel';
import SignIn from './Components/Signin/signin';
import Signup from './Components/Signup/Signup';


class App extends Component {
  showToast = (type, message) => {
    switch (type) {
      case 0:
        toast.warning(message)
        break;
      case 1:
        toast.success(message)
      default:
        break;
    }
  }
  render() {
    return (<Router>
      <ToastContainer
        autoClose={2000}
        hideProgressBar={true}
        position={toast.POSITION.TOP_CENTER}
      />
      <Switch>
        <Route
          path="/"
          exact
          render={props => <Home {...props} />}
        />
        <Route
          path="/signin"
          render={props => <SignIn showToast={this.showToast} {...props} />}
        />
        <Route
          path="/signup"
          render={props => <Signup showToast={this.showToast} {...props} />}
        />
        <Route
          path="/profile"
          render={props => <Profile showToast={this.showToast} {...props} />}
        />
        <Route
          path="/chat"
          render={props => <SidePanel showToast={this.showToast} {...props} />}
        />
      </Switch>
    </Router>
    );
  };
};

export default App;

适配react-router-dom v6

• 移除render属性，改用element传递组件
• 无需exact，v6默认精确匹配
• 使用BrowserRouter替代Router

修改后的App.js：

import { toast, ToastContainer } from 'react-toastify';
import React, { Component } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import './App.css';
import Home from './Components/Home/home';
import Profile from './Components/Profile/profile';
import SidePanel from './Components/SidePanel/sidePanel';
import SignIn from './Components/Signin/signin';
import Signup from './Components/Signup/Signup';


class App extends Component {
  showToast = (type, message) => {
    switch (type) {
      case 0:
        toast.warning(message)
        break;
      case 1:
        toast.success(message)
      default:
        break;
    }
  }
  render() {
    return (<Router>
      <ToastContainer
        autoClose={2000}
        hideProgressBar={true}
        position={toast.POSITION.TOP_CENTER}
      />
      <Routes>
        <Route
          path="/"
          element={<Home />}
        />
        <Route
          path="/signin"
          element={<SignIn showToast={this.showToast} />}
        />
        <Route
          path="/signup"
          element={<Signup showToast={this.showToast} />}
        />
        <Route
          path="/profile"
          element={<Profile showToast={this.showToast} />}
        />
        <Route
          path="/chat"
          element={<SidePanel showToast={this.showToast} />}
        />
      </Routes>
    </Router>
    );
  };
};

export default App;

3. 彻底清理依赖缓存 #

执行以下命令重置依赖：

rm -rf node_modules package-lock.json
npm install

内容的提问来源于stack exchange，提问作者Sam Zack