5

我在网络主机上启动并运行了一个反应网站，我正在尝试添加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)
4

1 回答 1

6

你必须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

希望这对你有用！

于 2019-09-09T09:24:40.677 回答