[英]React-router: TypeError: Cannot set property 'props' of undefined
I am trying to set up routing in Meteor
using react-router
package and have encountered the following TypeError
:我正在尝试使用
react-router
包在Meteor
中设置路由,但遇到了以下TypeError
:
Link to image: https://postimg.org/image/v0twphnc7/图片链接: https ://postimg.org/image/v0twphnc7/
The code in I use in main.js
我在
main.js
中使用的代码
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
// Importing components
import App from './components/app';
import Portfolio from './components/portfolio/portfolio';
//Creating a route
const routes = (
<Router history={browserHistory}>
<Route path='/' component={App}>
<Router path='portfolio' component={Portfolio} />
</Route>
</Router>
);
// Loading routes
Meteor.startup(() => {
ReactDOM.render(routes, document.querySelector('.universe'));
});
The problem that I've managed to identify is that when I define portfolio as a Simple Component it works.我设法确定的问题是,当我将投资组合定义为简单组件时,它会起作用。
const Portfolio = () => {
return (
<div className='red'>Portfolio page</div>
);
}
But when I extend it from the Component is where the error comes in:但是当我从 Component 扩展它时,错误就出现了:
class Portfolio extends Component () {
render() {
return (
<div>Portfolio page</div>
);
}
}
Can you please explain the possible difference between "normal" and class component and why the following error appears.您能否解释一下“普通”组件和类组件之间可能存在的差异以及出现以下错误的原因。
Assuming you are importing Component
as a React.Component
correctly, try removing the parenthesis after Component.假设您正确地将
Component
作为React.Component
导入,请尝试删除 Component 后的括号。
Should be:应该:
class Portfolio extends Component {
instead of:代替:
class Portfolio extends Component () {
If not, replace Component
with React.Component
.如果不是,请将
Component
替换为React.Component
。
I am trying to set up routing in Meteor
using react-router
package and have encountered the following TypeError
:我正在尝试使用
react-router
包在Meteor
设置路由并遇到以下TypeError
:
Link to image: https://postimg.org/image/v0twphnc7/图片链接: https : //postimg.org/image/v0twphnc7/
The code in I use in main.js
我在
main.js
中使用的代码
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
// Importing components
import App from './components/app';
import Portfolio from './components/portfolio/portfolio';
//Creating a route
const routes = (
<Router history={browserHistory}>
<Route path='/' component={App}>
<Router path='portfolio' component={Portfolio} />
</Route>
</Router>
);
// Loading routes
Meteor.startup(() => {
ReactDOM.render(routes, document.querySelector('.universe'));
});
The problem that I've managed to identify is that when I define portfolio as a Simple Component it works.我设法确定的问题是,当我将投资组合定义为简单组件时,它会起作用。
const Portfolio = () => {
return (
<div className='red'>Portfolio page</div>
);
}
But when I extend it from the Component is where the error comes in:但是当我从 Component 扩展它时,错误就出现了:
class Portfolio extends Component () {
render() {
return (
<div>Portfolio page</div>
);
}
}
Can you please explain the possible difference between "normal" and class component and why the following error appears.你能解释一下“正常”和类组件之间可能的区别,以及为什么会出现以下错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.