React-Router Fehler: Warnung: React.createElement, Uncaught unveränderliche Verletzung

Question

Ich habe so einen Fehler, wenn ich versuche, reagieren-Router zu verwenden:
Hier ist der Code:

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 

Der Navigation.js Code:

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 

Der Grund, warum ich denke, das Problem ist in Router ist, weil ohne Router es gut rendert.
Von package.json: "reagieren-Router": "4.0.0-beta.4"

Answer 1

ohhh, dass Beta und APHA ist !! Es ist eine gute Lektion, sie nicht zu benutzen, oder wenn sie dann sehr vorsichtig damit umgehen.
Also das Problem war, dass in der Anleitung, die ich verwendet habe, war "react-Router": "4.0.0-alpha.5", aber ich verwendete die neueste Version "react-Router": "4.0.0-beta.4 ". Anstatt also

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

sollte ich

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

verwenden und statt

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

I

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

Nach diesen Änderungen verwenden sollten - wurden keine Fehler festgelegt.

Answer 2

Landing.js returniung propably undefiniert, so exportiere Sie Navigation?

können Sie versuchen:

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