GraphQL查詢不會在響應路由器v4上更新歷史記錄推送

Question

我想在我的React Web應用程序中實現基本過濾選項。我有三個組成部分

VideoList 
-------------------------- 

Filter Result 
-------- ---------------- 
category 

的Filter組件和組件Result是VideoList組件的兩個孩子。在filter組件中，當用戶點擊該類別時，我正在推送一個新的url，如this.props.history.push( /videos/${category.name} )。似乎我的react-router設置正常工作，並且VideoList組件獲取新的類別名稱，併成功將其傳遞給Result組件。

<Route exact path="/videos" component={VideoList}/>, 
<Route exact path="/videos/:category" render={props => <VideoList {...props} />} />, 

在VideoLIst組件

<Result category={category} />

的Result組件使一個新的類別名稱的使用在自己的GraphQL查詢如下：

export default compose(
    graphql(VIDEOS_QUERY, { 
    options: props => { 
     return { 
     variables: { 
      filterByCategory: props.category ? props.category : null,  
     } 
     }; 
    }, 
... 

但是，一些未知我第一次推新網址時的原因props.data.VideoQuery（這是從graphql ser返回的值ver）中的Result組件得到undefined。但是，當用戶第二次點擊category時，Result組件呈現正確。

Answer 1

您是否嘗試過使用Switch而不是使用exact的路由？

<Switch> 
    <Route path="/videos" component={VideoList} /> 
    <Route path="/videos/:category" render={props => <VideoList {...props} />} /> 
</Switch>