javascript - ReactDOM - 元素类型无效 : expected a string (for built-in components) or a class/function (for composite components) but got: undefined

Question

我正在使用 React 和 Redux 在 Visual Studio 中构建一个基本的 shell 项目。我没有做任何疯狂的事情，但我收到了这个错误，我不知道为什么。错误是:错误:元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:未定义。您可能忘记从定义它的文件中导出您的组件，或者您可能混淆了默认导入和命名导入。 当我在 Google 和 SO 上查看时，每个人基本上都说了它在第二句中所说的内容错误。也就是说，我一定是混淆了命名导入和默认导入。当我尝试将大括号添加到导入行时，出现错误:TypeError: react_dom__WEBPACK_IMPORTED_MODULE_3__.ReactDOM is undefined。所以我很确定导入的原始代码是正确的。 这是错误来源的整个 index.js 文件:

import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createBrowserHistory } from 'history';
import configureStore from './store/configureStore';
import App from './App';
//import registerServiceWorker from './registerServiceWorker';

// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const history = createBrowserHistory({ basename: baseUrl });

// Get the application-wide store instance, prepopulating with state from the server where available.
const initialState = window.initialReduxState;
const store = configureStore(history, initialState);

const rootElement = document.getElementById('root');

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  rootElement);

//registerServiceWorker();

错误:

App.js 代码:

import React from 'react';
import { Route } from 'react-router';
import Layout from './components/Layout';
import Home from './components/Home';
import Counter from './components/Counter';
import FetchData from './components/FetchData';

export default () => (
  <Layout>
    <Route exact path='/' component={Home} />
    <Route path='/counter' component={Counter} />
    <Route path='/fetchdata/:startDateIndex?' component={FetchData} />
  </Layout>
);

configureStore.js代码:

import { applyMiddleware, combineReducers, compose, createStore } from 'redux';
import thunk from 'redux-thunk';
import { routerReducer, routerMiddleware } from 'react-router-redux';
import * as Counter from './Counter';
import * as WeatherForecasts from './WeatherForecasts';

export default function configureStore(history, initialState) {
  const reducers = {
    counter: Counter.reducer,
    weatherForecasts: WeatherForecasts.reducer
  };

  const middleware = [
    thunk,
    routerMiddleware(history)
  ];

  // In development, use the browser's Redux dev tools extension if installed
  const enhancers = [];
  const isDevelopment = process.env.NODE_ENV === 'development';
  if (isDevelopment && typeof window !== 'undefined' && window.devToolsExtension) {
    enhancers.push(window.devToolsExtension());
  }

  const rootReducer = combineReducers({
    ...reducers,
    routing: routerReducer
  });

  return createStore(
    rootReducer,
    initialState,
    compose(applyMiddleware(...middleware), ...enhancers)
  );
}

Answer 1

import { ConnectedRouter } from 'react-router-redux';

ConnectedRouter 不是 react-router-redux 的 API 的一部分

https://github.com/reactjs/react-router-redux#api