React-router 错误：警告：React.createElement, Uncaught Invariant Violation答案

【问题标题】：React-router errors: Warning: React.createElement, Uncaught Invariant ViolationReact-router 错误：警告：React.createElement, Uncaught Invariant Violation
【发布时间】：2017-02-06 11:17:15
【问题描述】：

我在尝试使用 react-router 时遇到这样的错误：
这是代码：

import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter, Match } from 'react-router'
import Landing from './Landing'

import 'bootstrap/dist/css/bootstrap.css'

const App = React.createClass({
  render () {
    return (
      <BrowserRouter>
        <div className='app'>
          <Match exactly pattern='/' component={Landing} />
        </div>
      </BrowserRouter>
    )
  }
})

render(<App />, document.getElementById('app'))

登陆.js：

import React from 'react'
import Navigation from './Navigation'

const Landing = React.createClass({
  render () {
    return (
      <Navigation />
    )
  }
})

export default Landing

Navigation.js 代码：

import React from 'react'
import {Link} from 'react-router'
import {Collapse, NavbarToggler, Navbar, NavbarBrand, Nav, NavItem, NavLink} from 'reactstrap'

class Navigation extends React.Component {
  constructor (props) {
    super(props)

    this.toggle = this.toggle.bind(this)
    this.state = {
      isOpen: false
    }
  }
  toggle () {
    this.setState({
      isOpen: !this.state.isOpen
    })
  }
  render () {
    return (
      <div>
        <Navbar color='faded' light toggleable>
          <NavbarToggler right onClick={this.toggle} />
          <NavbarBrand href='/'>reactstrap</NavbarBrand>
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className='ml-auto' navbar>
              <NavItem>
                <NavLink tag={Link} to='https://github.com/reactstrap/reactstrap'>Components</NavLink>
              </NavItem>
              <NavItem>
                <NavLink tag={Link} to='https://github.com/reactstrap/reactstrap'>Github</NavLink>
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    )
  }
}

export default Navigation

我认为问题出在路由器的原因是因为没有路由器它渲染得很好。
来自 package.json: "react-router": "4.0.0-beta.4"

【问题讨论】：

您是如何导出 Landing 组件的？它有默认导出吗？
是的，默认值。我已经阅读了这篇文章stackoverflow.com/questions/34130539/… 仍然找不到错误

标签： javascript reactjs webpack react-router

【解决方案1】：

Landing.js 可能返回未定义，那么您是否导出导航？

你可以试试：

//Landing.js
import React from 'react'
import Navigation from './Navigation'

const Landing = React.createClass({
  componentDidMount(){
    console.log(Navigation);
  }
  render () {
    return (
      <div>Landing working</div>
    )
  }
})

export default Landing

【讨论】：

嗯，你可以尝试在App.js中返回Landing，这样你就会知道错误是因为路由器还是你的组件
哦，对不起......所以问题出在路由器上，我不确定你为什么要使用BrowserRouter 和Match 组件。我正在使用<Router routes={routes} history={browserHistory} />，它工作正常。
事实上我已经发布了答案 - 你最后的猜测是正确的

【解决方案2】：

哦，那个 beta 和 apha 的！！不使用它们是一个很好的教训，或者如果使用则非常谨慎。
所以问题是在我使用的教程中使用的是“react-router”：“4.0.0-alpha.5”，但我使用了最新版本的“react-router”：“4.0.0-beta.4”。所以不是

import { BrowserRouter, Match } from 'react-router'

我应该使用

import Route from 'react-router-dom/Route'
import { BrowserRouter } from 'react-router-dom'

而不是

<BrowserRouter>
  <div className='app'>
    <Match exactly pattern='/' component={Landing} />
  </div>
</BrowserRouter>

我应该使用

<BrowserRouter>
  <div className='app'>
     <Route exact pattern='/' component={Landing} />
  </div>
</BrowserRouter>

在这些更改之后 - 没有定义错误。

【讨论】：