Redux + React-Router不呈现

Question

So I have pretty standard code which is still doesn't work. What's wrong here?

I tried this solution as I have the same errors: solution , but of no success. my errors in browser console still are:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

My code is:

var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var createBrowserHistory = require('history/lib/createBrowserHistory');
var createStore = require('redux').createStore;
var Provider = require('react-redux');
var connect = require('react-redux').connect;

var options = 'someTxt';

var reducer = function (state = {}, action) {
    console.log('reducer was called with state', state, 'and action', action)
    return state;
};

const store = createStore(reducer, options);

function mapStateToProps(state) {
    return {options: state.options};
};

var Index = React.createClass({
    render: function () {
        return (
            <div>
                {this.props.options}
            </div>
        );
    }
});

connect(mapStateToProps, {
    test: () => { type: 'TEST_ACTION' }
})(Index);

ReactDOM.render(
    <Provider store={store}>
        {() =>
            <Router history={createBrowserHistory()}>
                <Route path="/" component={Index}/>
            </Router>}
    </Provider>,
    document.getElementById("container")
);

__________UPDATE__________ Please also read comments, there are really useful information

Answer 1

Provider is part of the react-redux module; not all of it.

You need to change your require statement from

var Provider = require('react-redux');

to

var Provider = require('react-redux').Provider;

or with ES6 module syntax

import { Provider } from 'react-redux';

Answer 2

When you use arrow functions with bracets it's not the same that your function returns object. The bracets means function body (so you must use return statement in it). Here is how it suppose to be:

connect(mapStateToProps, {
    test: () => {return { type: 'TEST_ACTION' }}
})(Index);