我有一个非常标准的设置,一个带有页面的路由器
import React from "react"; import ReactDOM from "react-dom"; import { IndexRoute, Router, Route, Link, hashHistory as history } from "react-router"; import Layout from "./pages/Layout"; ... import User from "./pages/User"; ReactDOM.render( <Router history={history}> <Route path="/" component={Layout}> <IndexRoute component={...}/> <Route path="project/create" component={...}/> <Route path="project/:id" component={...}/> <Route path="user/:id" component={User}/> <Route path="*" component={...}/> </Route> </Router>, document.getElementById("app-root"));
除非我去一个页面像一切都可以正常使用site.tld/#/user/5的User组件有一些麻烦正确实例。其他所有页面均正常工作,我还有另一个使用url参数(project/:id)的页面,并且工作正常。
site.tld/#/user/5
User
project/:id
import React from "react"; ... export default class User extends React.Component { constructor() { super(); console.log(this); ... } render() { return ... }
这就是我在控制台中得到的
我敢肯定这是再一次愚蠢的事情,但我无法挑出来……
我认为您缺少以下内容,请尝试替换您的构造函数
constructor(props) { super(props); console.log(this.props) }
尝试一下,您应该从 this.props
this.props
在安装之前,会调用React组件的构造函数。在为React.Component子类实现构造函数时,应在其他任何语句之前调用super(props)。否则,this.props将在构造函数中未定义,这可能会导致错误。