React路由器V4沒有更新可選參數變更上的內容

Question

我是React的新手，我正在致力於網站的搜索功能。我正在使用create-react-app基礎。

這裏是路由：

<BrowserRouter> 
    <App> 
     <Switch> 
      <Route path='/' exact component={Home} /> 
      <Route path='/blah' component={Blah} /> 
      <Route path='/boop' component={Boop} /> 
      <Route path="/search/:searchTerm?" component={Search} /> 
      <Route path="*" component={NotFound} /> 
     </Switch> 
    </App> 
</BrowserRouter> 

注意一個具有可選參數的搜索。我在Search.js

import React, { Component } from 'react'; 
import { Link } from 'react-router-dom'; 

import SearchResults from './SearchResults'; 

export default class Search extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      searchTerm: this.props.match.params.searchTerm 
     } 
    } 

    render() { 
     return (
      <div className="Search"> 
       SEARCH: {this.state.searchTerm} 
       <SearchResults searchTerm={this.state.searchTerm} /> 
      </div> 
     ); 
    } 
} 

結束在觸發搜索的實際形式拿起這個參數精細，這個片段處理點擊：

handleClick(event) {   
    this.props.history.push('/search/'+this.state.value); 
} 

這個工作和喜歡/路徑顯示結果搜索/測試和/搜索/嗚。唯一的問題是，當我直接從一個搜索到另一個搜索。

/search/test - >/search/woo更新地址欄中的路徑，但不會使用新的搜索結果呈現woo頁面的內容。

轉到另一個路徑使它工作。所以/search/test - >/boop - >/search/woo所有按預期工作。

我在這裏錯過了什麼嗎？我是否需要以某種方式手動觸發它，或者如果可選參數更改觸發組件更新？

謝謝！

Answer 1

如果要將此術語存儲在組件的狀態中，則需要將狀態同步到每個更改的道具。

export default class Search extends Component { 
    ... 

    componentWillReceiveProps(nextProps) { 
     const newSearchTerm = nextProps.match.params.searchTerm 
     if(this.state.searchTerm !== newSearchTerm) { 
      this.setState(() => ({ searchTerm: newSearchTerm })) 
     } 
    } 

    ... 
} 

但是沒有理由這樣做。在render中使用this.props。它可以是這樣簡單

export default ({ match: { params: { searchTerm } } }) => (
    <div className="Search"> 
     SEARCH: {searchTerm} 
     <SearchResults searchTerm={searchTerm} /> 
    </div> 
)