2017-04-21 114 views
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() { 
... 
+1

你可以分享'About'組件嗎? – QoP

+0

@QoP我在示例中添加了更多細節。難道是因爲我使用'componentWillReceiveProps'來更新CustomerInfo狀態? –

回答

0

我認爲你需要的道具exact添加到您的第一個<Route />。否則,你的路線匹配指數和關於,我認爲反應路由器有意地呈現兩者。

+0

我的確有標籤,這不是問題 –