这是我路由器的定义:
import BugsOverview from './BugsOverview';
import BugDetail from './BugDetail';
import './index.css';
import { Router, Route, browserHistory } from 'react-router'
ReactDOM.render(
<Router history={browserHistory}>
<Route path="/" component={Login} />
<Route path="/login" component={Login} />
<Route path="/bugs-overview" component={Bugs} />
<Route path="/bugs-overview/:bugID" component={BugsDetails} />
<Route path="/logout" component={Logout} />
</Router>,
document.getElementById('root')
);
var BugsDetails = React.createClass({
render: function () {
return (<div>
<h1>Bug Detail</h1>
<BugDetail />
</div>
);
}
});
这是我的BugDetail组件:
import React, { Component } from 'react';
import './App.css';
import { browserHistory, Router } from 'react-router';
class BugDetail extends React.Component {
constructor(props, ctx) {
super(props);
console.log(props);// -->> {}
console.log(props.route);// -->> undefined
console.log(props.params);// -->> undefined
console.log(ctx);// -->> {}
this.state = {
un: "un",
pw: "pw"
};
}
getBugID(){
return (
<span> {this.props.params.bugID} </span>
)
}
render() {
return (
<div className="App">
Detail voor bug met id {this.getBugID()}
</div>
);
}
}
export default BugDetail;
问题是props
对象总是空的,所以我无法访问组件中的参数。换句话说:如果用户导航到http://localhost:3000/bugs-overview/anBugID
,我无法检测到值anBugID
。
我已经看到很多关于此的问题和页面,但没有一个能解决这个问题。
答案 0 :(得分:2)
只有传递给<Route component=
的组件才会收到参数信息,就像将道具从任何组件传递到另一个组件一样。他们不会跳过树中的任何组件。您需要将道具从BugDetail
传递给BugDetails
。
var BugsDetails = React.createClass({
render: function () {
return (
<div>
<h1>Bug Detail</h1>
<BugDetail
{...this.props} // this syntax passes all props
params={this.props.params} // or pass them individually
/>
</div>
)
}
})
如果您不想传递道具,可以使用一些解决方案,例如自己将支持信息放在上下文中,或者根据您的反应路由器版本,使用其他方法,例如withRouter