エラーを警告：私は反応し、ルータを使用しようとするとReact.createElement、キャッチされない不変違反

Question

は、私は、このようなエラーを得た：

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から
："反応し、ルータを"： "4.0.0-beta.4" を

Answer 1

あー、ベータおよびAPHAのこと！それを使用しない場合、またはそれを使用する場合は非常に慎重であることが良いレッスンです。
問題は、私が使用していたチュートリアルでは、 "react-router"： "4.0.0-alpha.5"を使用していましたが、最新バージョンの "react-router"を使用しました： "4.0.0- "エラーが定義されていなかった - だからではなく、

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

の私は、これらの変更後

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

を使用する必要があります

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

、代わりに

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

を使用する必要があります。

Answer 2

Landing.jsはpropably未定義returniungので、あなたは、ナビゲーションをエクスポートするのですか？

あなたは試すことができます：

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