Question

React JS 路由不起作用（未捕获的 TypeError：Super 表达式必须为空或函数，而不是对象）

2018-07-01

148

javascript reactjs react-router

我正在使用 React JS 开发一个简单的 Web 应用程序。我几天前才开始使用 React JS。现在正在按照教程处理路由部分。但是我的代码不起作用。

这是我的入口 js 文件。

import React from 'react';
import { render } from 'react-dom';
import ListComponent from './list.component';
import AddItemComponent from './additem.component';
import AboutComponent from './about.component';
import { Router, Route, browserHistory } from 'react-router';


//Create
class TodoComponent extends React.Component{
    constructor(){
        super()

        this.state = { todos : [ "Wash up", "Eat some KFC", "Take a long nap" ], age: 30 }
    }

    render(){
        var ager = setTimeout(()=> {
            this.setState({ age: this.state.age + 3 })
        }, 3000)

        return (
            <div>
                <h4>Age: {this.state.age}</h4>
                <ListComponent todos={this.state.todos} />
                <div>
                <AddItemComponent />
                </div>
            </div>
        )
    }
}



//put component into HTML page.
ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={TodoComponent} />
        <Route path="/" component={AboutComponent} />
    </Router>
    , 
    document.getElementById('todo-wrapper'));

其他组件位于单独的模块文件中，它们没有错误。在实现路由功能之前，我已经对它们进行了全部测试。当我运行我的代码时，我在浏览器控制台中收到此错误。

bundle.js:6 Uncaught TypeError: Super expression must either be null or a function, not object
    at bundle.js:6
    at bundle.js:6
    at Object.<anonymous> (bundle.js:6)
    at S (bundle.js:1)
    at r (bundle.js:1)
    at Object.<anonymous> (bundle.js:22)
    at S (bundle.js:1)
    at r (bundle.js:1)
    at Object.<anonymous> (bundle.js:22)
    at S (bundle.js:1)

我的代码缺少什么或有什么错误？为什么它不起作用？

这是我的 package.json

{
  "name": "realproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npm run build",
    "build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234 --history-api-fallback"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "create-react-class": "^15.6.3",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.13.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  }
}

Answer 1

首先， render 应该始终保持纯粹。在其中做有副作用的事情是一种非常糟糕的做法，而调用 setState 则是一个巨大的危险信号。

第二 browserHistory 不是版本 4 中的东西，因此您可以删除它，您正在从 react-router 导入所有内容，它应该是 react-router-dom

第三， react-router-dom 不会导出 Router ，而是导出 BrowserRouter ，因此您需要 import { BrowserRouter as Router, Route } from 'react-router-dom'

您必须决定哪个组件将占用主页，您不能有两个与 '/' 相同的路径的路由器，您也可以避免任何问题，请仅将 exact 添加到主路径

 <Router>
        <Route path="/" exact component={TodoComponent} />
        <Route path="/about" component={AboutComponent} />
    </Router>

要修复该错误 ReactDom 应与导入中的大小写相匹配，因此它应该是 ReactDOM

而不是此代码

import { render } from 'react-dom';

应该是

import ReactDOM from 'react-dom';

同时确保您的所有类组件都像这样的 React.Component ，并使用大写的 C

Answer 2

尝试添加 props 作为参数： constructor(props) 和 super(props) 。

Justin Reusch

2018-07-01