Error: Element type is invalid: expected a string or a class/function but got: object

Question

I'm getting this error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of Register.

this is my register codes :

import React from 'react';
import Button from '../../../components/atoms/Button'; 
import { connect } from 'react-redux';
import { registerUserAPI } from '../../../config/redux/action';

class Register extends React.Component {
  state = {
    email: '',
    password: '',  
  }

  handleChangeText = (e) => {
    this.setState({
      [e.target.id]: e.target.value
    })
  }

  handleRegisterSubmit = async () => {
    const {email, password} = this.state;
    const res = await this.props.registerAPI({email, password}).catch(err => err);
    if (res) {
      this.setState({
        email: '',
        password: ''
      }) 
    }  
  }
  render() {
    return (
      <div className="auth-container"> 
      <div className="auth-card">
        <p className="auth-title">Register Page</p>
        <input className="input" id="email" placeholder="Email" type="text" onChange={this.handleChangeText} value={this.state.email} />
        <input className="input" id="password" placeholder="Password" type="password" onChange={this.handleChangeText} value={this.state.password} />
        <Button onClick={this.handleRegisterSubmit} title="Register" loading={this.props.isLoading} />
      </div> 
      </div>
    );
  }
}

const reduxState = (state) => ({
  isLoading: state.isLoading
})

const reduxDispatch = (dispatch) => ({
  registerAPI: (data) => dispatch(registerUserAPI(data));
})

export default connect(reduxState, reduxDispatch)(Register);

App

import React from 'react';
import ReactDOM from 'react-dom';
import TopupPage from '../TopupPage';
import Register from '../Register';
import Dashboard from '../Dashboard/Layout';
import Login from '../Login';
import Homepage from '../Homepage';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from '../../../config/redux';
import thunk from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';

function App(){
  return (
    <Provider store={store}>
      <Router>
        <div>
          <Route path="/" exact component={Homepage} />
          <Route path="/register" component={Register} />
          <Route path="/TopupPage" component={TopupPage} />
          <Route path="/login" component={Login} />
        </div>
      </Router>
   </Provider>
 );
}

export default App;

Answer 1

Change:

  <Route path="/login" component={<Login/>} />

to

  <Route path="/login" component={Login} />

Also here is a syntax error:

const reduxDispatch = (dispatch) => ({
  registerAPI: (data) => dispatch(registerUserAPI(data));
})

you should remove ';'.