Javascript React路由器错误：警告：React.createElement，未捕获不变冲突

我在尝试使用react路由器时遇到了这样一个错误：
代码如下：

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'))

从“React”导入React
从'react dom'导入{render}
从“react router”导入{BrowserRouter，Match}
从“./Landing”导入着陆
导入“bootstrap/dist/css/bootstrap.css”
const App=React.createClass({
渲染（）{
返回(
)
}
})
render（，document.getElementById（'app'））

Landing.js：

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

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

export default Landing

从“React”导入React
从“./Navigation”导入导航
const Landing=React.createClass({
渲染（）{
返回(
)
}
})
导出默认着陆点

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

从“React”导入React
从“反应路由器”导入{Link}
从“reactstrap”导入{Collapse，NavbarToggler，Navbar，NavbarBrand，Nav，NavItem，NavLink}
类导航扩展了React.Component{
建造师（道具）{
超级（道具）
this.toggle=this.toggle.bind（this）
此.state={
伊索彭：错
}
}
切换（）{
这是我的国家({
isOpen:！this.state.isOpen
})
}
渲染（）{
返回(
反应带
组件
github
)
}
}
导出默认导航

我认为问题出在路由器上的原因是，如果没有路由器，它的渲染效果会很好。

---

从package.json:“react router:“4.0.0-beta.4”

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

//Landing.js
从“React”导入React
从“./Navigation”导入导航
const Landing=React.createClass({
componentDidMount（）{
控制台日志（导航）；
}
渲染（）{
返回(
着陆作业
)
}
})
导出默认着陆点

哦，那是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>  

---

在这些更改之后-未定义任何错误。

如何导出着陆组件？是否有默认导出？是，默认。我已经读了这篇文章，但仍然找不到错误。嗯，你可以尝试在App.js中返回Landing，这样你就会知道错误是因为路由器还是你的组件。哦，对不起。。。所以问题出在路由器上，我不确定你们为什么要使用

BrowserRouter

和

Match

组件。我使用的是

，效果很好。事实上，我已经发布了答案-你最后的猜测是对的