2
在我的項目反應路由器似乎有問題來驗證我的一些組件，並在控制檯中得到此錯誤。不知何故，它之前工作得很好，但現在我已經改變了一些東西，它不再工作。任何人都可以在這裏看到問題？這與webpack配置有關嗎？反應路由器無效道具`組件`提供給`路線`
Warning: Failed propType: Invalid prop `component` supplied to `Route`.
Warning: [react-router] Invalid undefined `component` supplied to `Route`.
index.js
的appbar使細和我還可以導航到MatchesPage和IndexPage只包含一個基於類組分與單格。但是，當我導航到其他組件沒有任何反應。在這個頁面的底部，我有一個組件示例users-page.js沒有渲染。
import React from 'react';
import ReactDOM from 'react-dom';
import ThemeManager from 'material-ui/lib/styles/theme-manager';
import Theme from './theme';
import injectTapEventPlugin from 'react-tap-event-plugin';
import AppBar from './components/app-bar/app-bar';
import IndexPage from './components/index-page/index-page';
import Matches from './components/matches-page/matches-page';
import Users from './components/users-page/users-page';
import Register from './components/register-page/register-page';
import Login from './components/login-page/login-page';
import Profile from './components/profile-page/profile-page';
import { Router, Route, IndexRoute, hashHistory } from 'react-router';
import Firebase from 'firebase';
import css from './main.scss';
class App extends React.Component {
constructor(props) {
super(props);
this.firebaseRef = new Firebase('myurl');
this.firebaseRef.onAuth(this.authDataCallBack);
}
authDataCallBack = (authData) => {
console.log('authDataCallBack');
if (authData) {
console.log('User ' + authData.uid + ' is logged in with ' + authData.provider);
this.firebaseRef.child('users').child(authData.uid).update({
provider: authData.provider,
email: authData.password.email
});
} else {
console.log('User is logged out');
}
}
componentWillUnmount() {
this.firebaseRef.offAuth(this.authDataCallBack);
}
static childContextTypes = {
muiTheme: React.PropTypes.object
}
getChildContext() {
return {
muiTheme: ThemeManager.getMuiTheme(Theme)
};
}
render() {
return (
<div>
<AppBar className={css.appbar} />
<div className={css.container} >
{this.props.children}
</div>
</div>
);
}
}
injectTapEventPlugin();
ReactDOM.render((<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={IndexPage}/>
<Route path="matches" component={Matches}/>
<Route path="users" component={Users}/>
<Route path="register" component={Register}/>
<Route path="login" component={Login}/>
<Route path="profile" component={Profile}/>
</Route>
</Router>), document.getElementById('app'));
webpack.config.js
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
context: __dirname + "/src",
devtool: "#inline-source-map",
entry: ['webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8080', path.resolve(__dirname, 'src/index.js')],
output: {
path: path.resolve(__dirname),
filename: 'bundle.js',
},
resolve: {
extensions: ['', '.jsx', '.scss', '.js', '.css']
},
module: {
loaders: [
{
test: /\.js$/,
loaders: [ "babel-loader", "eslint-loader" ],
exclude: /node_modules/
},
{
test: /\.(css|scss)$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass-loader')
}]
},
plugins: [
new ExtractTextPlugin("styles.css")
]
};
的package.json
{
"name": "atc-react-webpack",
"version": "1.0.0",
"description": "Website ATC10",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot"
},
"author": "Jeroen Wienk",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.5.1",
"babel-eslint": "^5.0.0",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"node-sass": "^3.4.2",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0",
"eslint": "^2.1.0",
"eslint-loader": "^1.3.0",
"eslint-plugin-react": "^3.16.1",
"webpack": "^1.12.13",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"babel-polyfill": "^6.5.0",
"classnames": "^2.2.3",
"firebase": "^2.4.1",
"flexboxgrid": "^6.3.0",
"material-ui": "^0.14.4",
"normalize.css": "^3.0.3",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-flexbox-grid": "^0.9.4",
"react-router": "^2.0.0",
"react-tap-event-plugin": "^0.2.2"
}
}
用戶-page.js
這不是一個V阿里德組件莫名其妙。
import React from 'react';
import UsersList from './users-list';
import Firebase from 'firebase';
import _ from 'lodash';
import css from './users-page.scss';
export default class UsersPage extends React.Component {
constructor(props) {
super(props);
this.state = {
users: []
};
this.firebaseRef = new Firebase('myurl');
}
componentWillUnmount() {
this.firebaseRef.off();
}
componentWillMount() {
this.firebaseRef.on('value', (snapshot) => {
let usersVal = snapshot.val();
let users = _(usersVal)
.keys()
.map((key) => {
let cloned = _.clone(usersVal[key]);
cloned.key = key;
return cloned;
}).value();
this.setState({
users: users
});
});
}
callback =() => {
console.log(this.state.users);
}
render() {
return (
<div className={css.usersPageRoot}>
<h3 className={css.usersPageHeading}>SPELERS</h3>
<div className={css.usersPageContentContainer}>
<UsersList users={this.state.users}/>
</div>
</div>
);
}
}
謝謝... <3 – Johnny