React 路由參數改變頁面不刷新問題

最近寫的項目遇到遇到關於react路由的問題，原項目中，查找的時候獲取文本框上的值並跳轉到查找結果頁面，在componentDidMount函數中獲取路由上的關鍵字，向其餘組件傳遞參數keywords，向後臺查詢結果並返回。在從新查詢的過程當中，發現雖然路由上的參數已經改變，然而頁面上的查找結果並無更新。

原代碼：

//定義變量
state={
     key:""
}

//獲取值
componentDidMount(){
        let key = this.props.match.params.key;
        this.setState({
            key:key
      })
}

//傳遞參數
 <Article keywords={`${this.state.key}`}/>

隨後排查後發現頁面獲取key時是在componentDidMount中獲取的，而componentDidMount只在第一次渲染後調用，所以雖然路由改變了可是並無再次調用函數，具體Recat的生命週期可參考http://www.runoob.com/react/react-component-life-cycle.html

所以在參數改變的時候，能夠利用componentWillReceiveProps來更新變量

//組件更新時被調用 
componentWillReceiveProps(nextProps){
        let key = nextProps.match.params.key;
        this.setState({
            key:key
        })
}

注意:像Article中也一樣須要加入componentWillReceiveProps函數，加入後便可正常刷新頁面。

 

ps:若有更好的解決方法，歡迎交流