如何修正“隐蔽性错误:不变失败”反应-- react中的路由器-dom错误

Question

我有一个反应网站在网络主机上运行，我试图添加react router到它，所以我安装了react-router-dom使用npm，但我得到这个错误，没有进一步解释的错误消息或任何事情。

我尝试将react-router-dom更改为react-router，这是旧版本，但是我得到了不同的错误，所以我返回了returned。

// 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

您必须用BrowserRouter包装您的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

希望这对你有用！