Question

该代码是一个带有两条路线（家庭和柜台）的演示SPA。为什么在捆绑时使用ConnectedRouter会发出以下警告，而使用BrowserRouter却可以正常工作？

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. Check the render method of `Unknown`.
in Unknown
in AppContainer

App.jsx

import React from 'react';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import { Route } from 'react-router-dom';
import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux';
import createHistory from 'history/createBrowserHistory';

import Counter from './containers/Counter';
import countReducer from './reducers';

const history = createHistory();

const store = createStore(
  combineReducers({
    count: countReducer,
    router: routerReducer
  },
  applyMiddleware(
    routerMiddleware(history)
  )
);

export default () => (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <Route exact path="/" render={() => <h1>Hello, World!</h1>} />
        <Route path="/counter" component={Counter} />
      </div>
    </ConnectedRouter>
  </Provider>
);

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

const render = (Component) => {
  ReactDOM.render(
    Component,
    document.getElementById('root')
  );
};

if (process.env.NODE_ENV === 'production') {
  render(<App />);
} else {
  const { AppContainer } = require('react-hot-loader');

  render(
    <AppContainer>
      <App />
    </AppContainer>
  );

  if (module.hot) {
    module.hot.accept('./App', () => {
      const NextApp = require('./App').default;

      render(
        <AppContainer>
          <NextApp />
        </AppContainer>
      );
    });
  }
}

使用ConnectedRouter时，“React.createElement：type无效”

0 个答案: