Question

在我的项目中，路由器似乎有问题来验证我的一些组件，我在控制台中收到此错误。以某种方式它以前运作良好，但现在我已经改变了一些东西，它不再起作用了。谁能在这里看到这个问题？是否与webpack配置有关？

Warning: Failed propType: Invalid prop `component` supplied to `Route`.
Warning: [react-router] Invalid undefined `component` supplied to `Route`.

index.js

appbar渲染得很好，我也可以导航到MatchesPage和IndexPage，它只包含一个带有单个div的基于类的组件。但是当我导航到其他组件时没有任何反应。在本页面的底部，我有一个不呈现的组件示例 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

这不是一个有效的组件。

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>
    );
  }
}

Answer 1

我找到了解决方案，scss文件的名称与组件名称相同，这导致路由器尝试渲染scss文件。

反应路由器无效的prop`组件`提供给`Route`

1 个答案: