main.js:

import ReactDOM from 'react-dom'; import React from 'react'; import App from './App.jsx'; import AboutPage from './components/AboutPage.jsx'; import { Router , Route, hashHistory } from 'react-router'; ReactDOM.render( <Router history={hashHistory}> <Route path='/' component={App}> <Route path='/about' component={AboutPage} /> </Route> </Router>, document.getElementById('mount-point') );

App.jsx (problem with Link components, tidying and everything works):

 import React from 'react'; import Link from 'react-router'; const App = React.createClass({ render: function() { return ( <div className="app"> <div className="menu-bar"> <div className="menu-item"> <Link to="/about">About</Link> </div> </div> <div className="content"> {this.props.children} </div> </div> ); } }); export default App;

Errors:

 warning.js?0260:44Warning: 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). Check the render method of `App`. invariant.js?568c:38Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `App`.

Webpack config:

 var webpack = require('webpack'); module.exports = { entry: './src/main.js', output: { path: __dirname + '/public/build', publicPath: 'build/', filename: 'bundle.js' }, module: { loaders: [ { test: /\.js$/, loader: "babel", exclude: [/node_modules/, /public/], query: { presets: ['es2015', 'react'], } }, { test: /\.css$/, loader: "style-loader!css-loader!autoprefixer-loader", exclude: [/node_modules/, /public/] }, { test: /\.jpg$/, loader: "url-loader?limit=10000&mimetype=image/jpg", }, { test: /\.png$/, loader: "url-loader?limit=10000&mimetype=image/png", }, { test: /\.svg$/, loader: "url-loader?limit=26000&mimetype=image/jpg", }, { test: /\.jsx$/, loader: "react-hot!babel?presets[]=es2015,presets[]=react", exclude: [/node_modules/, /public/], }, { test: /\.json$/, loader: "json-loader", exclude: [/node_modules/, /public/] }, ] } };
  • You did not give the code AboutPage.jsx . By the way, I’m debuting such errors, it’s much faster to put a full stop before declaring everything, and see if the component was initialized - Vasily Barbashev

1 answer 1

Your problem is that you are not importing the Link component correctly. Design

 import Link from `react-router`;

Imports the entire contents of the react-router library into the Link variable. Instead, you only need to pull the component out of the library. Like this:

 import { Link } from `react-router`;