App.jsx

import React from "react"
import PropTypes from "prop-types"
import {Router, Route, Switch} from 'react-router-dom'
import Header from './layout/Header'
import history from '../helpers/history'
import {default as EventsSearch} from './events/Search'
import {default as SessionsNew} from './sessions/New'
import {default as RegistrationsNew} from './registrations/New'

class App extends React.Component {
  state = {currentUser: null}

  signIn(user){
    this.setState({currentUser:user})
  }

  signOut(){
    this.setState({currentUser:null})
  }

  render () {
    return (
      <Router history={history}>
        <React.Fragment>
          <Header currentUser={this.state.currentUser} signOut={this.signOut}/>
          <Route path="/" exact component={EventsSearch}/>
          <Route path="/signin" component={SessionsNew}/>
          <Route
            path='/register'
            render={(props) => <RegistrationsNew {...props} signIn={this.signIn} />}
          />
        </React.Fragment>
      </Router>
    );
  }
}

export default App

error.txt

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Header.jsx

import React from "react"
import PropTypes from "prop-types"
import {Link} from 'react-router-dom'

class Header extends React.Component {
  render () {
    return (
      <React.Fragment>
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <Link className="navbar-brand" to="/">MeetPlanner</Link>
          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>

          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav mr-auto">

              <li className="nav-item">
                <Link className="nav-link" to="/">Browse Events</Link>
              </li>
              <li className="nav-item">
                <a className="nav-link" href="#">Calculator</a>
              </li>

              <li className="nav-item">
                {true ? (
                  <a className="nav-link" >Logout</link>
                ) : (
                  <Link className="nav-link" to="/signin">Login</Link>
                )}
              </li>
            </ul>
            <form className="form-inline my-2 my-lg-0">
              <input className="form-control mr-sm-2" type="search" placeholder="Find event" aria-label="Search"/>
              <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>
      </React.Fragment>
    );
  }
}

export default Header