React-router错误：警告：React.createElement，Uncaught Invariant Violation

Question

当我尝试使用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'))

Landing.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：＆＃34; react-router＆＃34;：＆＃34; 4.0.0-beta.4＆＃34;

Answer 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

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

在这些变化之后 - 没有定义任何错误。