React-router errors: Warning: React.createElement, Uncaught Invariant Violation

Question

I got such an error when I try to use react-router:
Here's the 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

The 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

The reason I think the problem is in router is because without router it renders well.
From package.json: "react-router": "4.0.0-beta.4"

How are you exporting your Landing component? Does it have a default export? — semuzaboi, Feb 06 '17 at 13:50
Yes, default. And I've read this article http://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string and still can't find the errror — Taras Yaremkiv, Feb 06 '17 at 13:53

score 0 · Answer 1 · answered Feb 06 '17 at 14:47

0

Landing.js propably returniung undefined, so do you export Navigation?

You can try:

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

answered Feb 06 '17 at 14:47

codeScavenger

1
1

well, you can try returning Landing in App.js, so you will know if the error is because of router or your component – codeScavenger Feb 06 '17 at 15:47
1

oh, sorry... so problem is in router, im not really sure why are you using `BrowserRouter` and `Match` component. Im using `` and it works fine. – codeScavenger Feb 06 '17 at 17:31
I've post the answer in fact - your last guessing was right – Taras Yaremkiv Feb 06 '17 at 18:26

score 0 · Accepted Answer · answered Feb 06 '17 at 17:41

ohhh, that beta and apha's!! It's a good lesson for not using them, or if use then very cautious with that.
So the problem was that in the tutorial that I used was using "react-router": "4.0.0-alpha.5", but I used latest version "react-router": "4.0.0-beta.4". So instead of

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

I should use

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

and instead of

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

I should use

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

After these changes - no errors were defined.

React-router errors: Warning: React.createElement, Uncaught Invariant Violation

2 Answers2