關於網址更改我想重新呈現我的組件我應該怎麼做

Question

我有兩個鏈接，它提取示例組件，但當我點擊其中任何一個它被加載，當我點擊另一個它不會重新呈現只有網址得到改變。我想重新渲染組件上的兩個鏈接點擊。有沒有辦法做到這一點？

Answer 1

當我正在做一個反應項目時，我曾經遇到類似的問題。

您需要在組件中使用componentWillReceiveProps函數。

componentWillReceiveProps(nextProps){ 
    //call your api and update state with new props 
    } 

爲了更清楚在運行通過調用URL www.example.com/content/a componentDidMount()首次您的組件加載時。

現在，當你點擊另一個鏈接時，比如說www.example.com/content/b調用了相同的組件，但是這次prop改變了，你可以在componentWillReceiveProps(nextProps)下訪問這個新的prop，你可以使用它來調用api並獲取新數據。

現在你可以保持一個共同的功能說_initializeComponent（）和componentDidMount（）和componentWillReceiveProps（）調用它

您的路由器會是這個樣子： -

ReactDOM.render((
    <Router history={browserHistory}> 
     <Route path="/content" component={app}> 
     <IndexRoute component={home}/> 
     <Route path="/content/:slug" component={component_name} /> 
     </Route> 
    </Router> 
), document.getElementById('app')); 

所以，現在你的時候請致電www.example.com/content/a，a將被視爲slug。在該組件中，如果您致電www.example.com/content/b，b將被視爲slug，並將作爲componentWillReceiveProps中的nextProps參數提供。

希望它有幫助！