I started learning React and React Router by making basic application but I am getting warnings that I am not able to resolve
Warning 1: React.createElement: type is invalid -- expected a string
(for built-in components) or a class/function (for composite components)
but got: undefined.
Warning 2: Failed prop type: The prop `history` is marked as required
in `Router`, but its value is `undefined`.
My code :
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import routes from './routes'
ReactDOM.render(routes, document.getElementById('app'));
.
routes.js
import React from 'react'
import { Route } from 'react-router'
import Home from './components/home';
import Login from './components/login'
const routes = (
<Route path="/" component={Home}>
<Route path="/login" component={Login} />
</Route>
);
export default routes;
. home.js
import React from 'react'
export default React.createClass({
render(){
return (
<div>
<h1>Hello From Home</h1>
</div>);
}
});
login.js
import React from 'react'
export default React.createClass({
render(){
return (<h1>Hello From Login Page</h1>);
}
});
this is my
package.json
{
"name": "basicapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"production": "webpack -p",
"start": "webpack-dev-server"
},
"author": "aviaTorX",
"license": "ISC",
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-router": "^4.0.0"
},
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.0",
"babel-preset-react": "^6.23.0",
"html-webpack-plugin": "^2.28.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.2"
}
}
It is giving Blank screen with warnings above mentioned.
if you're using react-router ^4.0.0
, your root component need a Router
element. It is seems missing from your routes.js
file. Your routes.js
should look like this:
import React from 'react'
import { Route, BrowserRouter as Router } from 'react-router'
import Home from './components/home';
import Login from './components/login'
const routes = (
<Router>
<Route path="/" component={Home}>
<Route path="/login" component={Login} />
</Route>
</Router>
);
export default routes;
Your routes.js should be
import React from 'react'
import {
Route,
Router,
IndexRoute,
hashHistory
} from 'react-router'
import Home from './components/home';
import Login from './components/login'
export const routes = () => {
return(
<Router history={hashHistory}>
<IndexRoute component={Home} />
<Route path="/login" component={Login} />
</Router>
);
};
export default routes;
You can directly use this.props.history.push('/list/')
. But remember that, the version of my react-router
is ^4.2.0
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.