react-route-redux:元素类型无效:期望字符串(对于内置组件)或类/函数(对于复合组件)

时间:2017-04-27 00:57:55

标签: javascript reactjs redux react-redux react-router-redux

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';
import { Route } from 'react-router';
import reducer from './reducers';
import App from './components/App';

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

const history = createHistory();

const store = createStore(
  reducer,
  applyMiddleware(thunk),
  applyMiddleware(routerMiddleware(history))
)

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

App.js

import React from 'react';
import Header from './Header';
import MainSection from '../containers/MainSection';

class App extends React.Component {
  render() {
    return (
      <div className="container-fluid">
        <Header />
        <MainSection />
      </div>
    );
  }
}

export default App;

Header.js

import React, { Component } from 'react';
import { IndexLink } from 'react-router';

export default class Header extends Component {
  render() {
    return (
      <nav>
        <IndexLink to="/" activeClassName="active">Home</IndexLink>
      </nav>
    )
  }
};

控制台输出:

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 your code at Header.js:8.
    in Header (at App.js:9)
    in div (at App.js:8)
    in App (created by Route)
    in Route (at index.js:23)
    in div (at index.js:22)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (at index.js:21)
    in Provider (at index.js:20)  bundle.js:11913:10
Error: Element 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 `Header`.  bundle.js:11472:16

有什么想法吗?感谢

更新

import React from 'react';
import { Link } from 'react-router-dom';

export default class Header extends React.Component {
  render() {
    return (
      <nav>
        <Link to="/" activeClassName="active">Home</Link>
      </nav>
    )
  }
};

0 个答案:

没有答案