React JS routing not working (Uncaught TypeError: Super expression must either be null or a function, not object)

I am developing a simple web application using React JS. I just started using React JS a few days ago. Now working on the routing part following a tutorial. But my code is not working.

This is my entry js file.

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


Other components are in the individual module file and they have no error. I already tested them all before implementing route feature. When I run my code, I got this error in the browser console.

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)


What is missing or wrong with my code? Why it is not working?

This is my 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"
}
}


2 Answers
2

First of all, render should always remain pure. It's a very bad practice to do side-effecty things in there, and calling setState is a big red flag.

render

setState

Second browserHistory isn't the thing in version 4, so you can remove that, you're importing everything from react-router it should react-router-dom

browserHistory

react-router

react-router-dom

Third, react-router-dom doesn't export a Router, instead, it exports a BrowserRouter so you need to import { BrowserRouter as Router, Route } from 'react-router-dom'

react-router-dom

Router

BrowserRouter

import { BrowserRouter as Router, Route } from 'react-router-dom'

You must decide which component will take the main page you can't have two Router's with the same path as you did '/' as well you to avoid any problems add exact only to the main path

'/'

exact

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


To fix that error ReactDom should match the case in your import, so it should be ReactDOM

ReactDom

ReactDOM

Instead of this code

import { render } from 'react-dom';


Should be

import ReactDOM from 'react-dom';


As well make sure all your class components like this React.Component with an uppercase C

React.Component

C

Try adding props as parameter: constructor(props) and super(props).

props

constructor(props)

super(props)

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.