react - redux - router setup issues

Question

Can anyone help me figure out how to get this setup working.

import 'babel-polyfill';
    import React from 'react';
    import ReactDOM from "react-dom";
    import {Provider} from 'react-redux';
    import {createStore, applyMiddleware} from 'redux';
    import thunk from 'redux-thunk';
    import promise from 'redux-promise';
    import createLogger from 'redux-logger';
    import allReducers from './reducers';
    import App from './components/App';
    import createHistory from 'history/createBrowserHistory'
    import { Route } from 'react-router-dom'
    import { ConnectedRouter, routerMiddleware, push } from 'react-router-redux'

    const logger = createLogger();

    // Create a history of your choosing (we're using a browser history in this case)
    const history = createHistory()

    // Build the middleware for intercepting and dispatching navigation actions
    const middleware = routerMiddleware(history)

    // Add the reducer to your store on the `router` key
    // Also apply our middleware for navigating
    const store = createStore(
    allReducers,
    applyMiddleware(middleware, thunk, promise, logger)
    )

    ReactDOM.render(
        <Provider store={store}>
            <ConnectedRouter history={history}>
            <div>
                <Route exact path="/" component={App}/>
            </div>
            </ConnectedRouter>
        </Provider>,
        document.getElementById('root')
    );

I seem to be getting an error called. 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.

Well as the error says, you most likely forgot to add export default App; as the last line of your App.js component file. — DrunkDevKek
– DrunkDevKek, Commented Jun 5, 2017 at 16:01

fkulikov · Accepted Answer · 2017-06-06 12:56:14Z

1

Make sure all your Components down the App hierarchy are properly exported as default export.

Also take a look at where do you take your react-router Components from. It's kind of common mistake to try to import Link component from react-router module, while it exists in react-router-dom module only.

answered Jun 6, 2017 at 12:56

fkulikov

3,19915 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

EverydayTinkerer · Accepted Answer · 2017-06-06 13:44:04Z

1

Thanks for all the feedback the answer was ConnectedRouter was undefined. I have now fixed this importing correctly.

answered Jun 6, 2017 at 13:44

EverydayTinkerer

1301 silver badge10 bronze badges

Collectives™ on Stack Overflow

react - redux - router setup issues

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related