如何修复“未捕获的错误：不变失败”react-router-dom 错误反应

Question

我在 Web 主机上启动并运行了一个 React 网站，我正在尝试添加react router它，所以我react-router-dom使用安装npm，但我收到此错误，但没有进一步解释错误消息或任何内容。

我尝试更改react-router-dom为react-router旧版本，但出现不同的错误，因此我返回到 react-router-dom。

// src/Container3d.js 
import React, { Component } from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'

import Scene3d from './Scene3d'
import Model2 from './Model2'

class Container3d extends Component {

  render() {
    return (
      <Router>
        <div className="container3d">
          <Route path="/model-1" component={Scene3d} />
          <Route path="/model-2" component={Model2} />
        </div>
      </Router>
    )
  }
}

export default Container3d

///////////////////////////////////////////////////////

// src/App.js 
import { Link } from 'react-router-dom'

class App extends Component {

  render() {
    return (
      <ul>
        <li>
          <Link to="/model-1">model-1</Link>
        </li>
        <li>
          <Link to="/model-2">model-2</Link>
        </li>
      </ul>
    )
  }
}

export default App

错误信息：

react-dom.production.min.js:198 Error: Invariant failed
    at invariant (tiny-invariant.esm.js:9)
    at react-router-dom.js:154
    at Tg (react-dom.production.min.js:184)
    at bi (react-dom.production.min.js:232)
    at ci (react-dom.production.min.js:233)
    at Di (react-dom.production.min.js:249)
    at Yh (react-dom.production.min.js:248)
    at Xh (react-dom.production.min.js:245)
    at qf (react-dom.production.min.js:243)
    at Ji (react-dom.production.min.js:253)
qh @ react-dom.production.min.js:198


react-dom.production.min.js:248 Uncaught Error: Invariant failed
    at invariant (tiny-invariant.esm.js:9)
    at react-router-dom.js:154
    at Tg (react-dom.production.min.js:184)
    at bi (react-dom.production.min.js:232)
    at ci (react-dom.production.min.js:233)
    at Di (react-dom.production.min.js:249)
    at Yh (react-dom.production.min.js:248)
    at Xh (react-dom.production.min.js:245)
    at qf (react-dom.production.min.js:243)
    at Ji (react-dom.production.min.js:253)

Answer 1

你必须App用BrowserRouter. 看看下面的代码。

import { Link, BrowserRouter as Router } from 'react-router-dom'

class App extends Component {

  render() {
    return (
     <Router>
      <ul>
        <li>
          <Link to="/model-1">model-1</Link>
        </li>
        <li>
          <Link to="/model-2">model-2</Link>
        </li>
      </ul>
     </Router>
    )
  }
}

export default App

在这里，我为您创建了小演示！
https://stackblitz.com/edit/react-router-sbhdpk

希望这对你有用！