0

Trying to get react-router-dom and react-redux to play nicely, but getitng the following error in the browser console:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

index.js

import React from 'react';
import ReactDom from 'react-dom';
import Provider from 'react-redux';
import { createStore } from 'redux';
import reducer from './src/reducers/Index';
import Root from './src/views/Root';

let store = createStore(reducer)

ReactDom.render(
    <Provider store={store}>
        <Root />
    </Provider>,
    document.getElementById('content')
);

reducer (Index.js)

import {combineReducers} from 'redux';
import Login from './Login';

export default combineReducers({
    Login
})

reducer (Login.js)

export default function login(state = 'Login', action) {
  switch (action.type) {
    case 'LOGINLOADING':
      return state + 1
    case 'LOGINLOADED':
      return state - 1
    default:
      return state
  }
}

Root.js

import React from 'react';
import BrowserRouter from 'react-router-dom';
import App from './App';

class Root extends React.Component {
    render(){
        return (
            <BrowserRouter>
                <App />
            </BrowserRouter>
        );
    }
}

export default Root;

App.js

import React from 'react';

class App extends React.Component {
    render(){
        return (
            <div>
                <p> Hello Kitty </p>
            </div>
        );
    }
}

export default App;
  • Does this answer your question? [React.createElement: type is invalid -- expected a string](https://stackoverflow.com/questions/42813342/react-createelement-type-is-invalid-expected-a-string) – lifeisfoo Jun 08 '20 at 12:30

2 Answers2

0

Sorry i fixed follow this.

import {createStore} from 'redux';

To

 import createStore from 'redux';
0
import BrowserRouter from 'react-router-dom';

notice that BrowserRouter is not a default export from react-router-dom package. Hence, you'll need to state it with the curly braces:

import { BrowserRouter } from 'react-router-dom';
mithocondria
  • 101
  • 4