0
我有反應路由器設置與路由參數:name
鏈接=不帶/路由工作:參數
<Router>
<Switch>
<Route path="/" exact={true} component={Index} />
<Route path="/about/:name" component={About} />
<Route component={NotFound} />
</Switch>
</Router>
使用<Link to=
,從指數的鏈接正確地路由到例如/about/vinnie
。
但是,如果<Link to=
組件位於「關於」頁面上,則單擊該鏈接僅會更新瀏覽器URL,但不會重新呈現正確的頁面。
任何線索爲什麼會發生這種情況?
About.jsx
render() {
const id = this.props.match.params.name;
return (
<div className="Explore">
<div className="container">
<Api endpoint={[this._apiEndpoint(id, 'info')]} loadData={true}>
<CustomerInfo />
</Api>
...
Api.jsx
render() {
let showData = this.props.loadData ? null : <button onClick={() => this._loadButton()}>Show</button>;
return (
<span>
{this.props.children && React.cloneElement(this.props.children, {
apiData: this.state.rawData
})}
{showData}
</span>
);
};
CustomerInfo.jsx
class CustomerInfo extends React.Component {
constructor(props) {
super(props);
this.state = {
CustomerInfo: {}
}
}
componentWillReceiveProps(nextProps) {
if (this.props.apiData !== nextProps.apiData) {
this.setState({CustomerInfo: nextProps.apiData[0]});
}
}
render() {
...
你可以分享'About'組件嗎? – QoP
@QoP我在示例中添加了更多細節。難道是因爲我使用'componentWillReceiveProps'來更新CustomerInfo狀態? –