Routeコンポーネントpropの代わりにRoute render propを使用する場合、どのようにreact-router-dom 4のurl argsにアクセスしますか？

Question

私はreact-router-dom v 4.0.0を使用しています。

反応ルータをレンダリングするトップレベルの<App />コンポーネントには、3つのルートがあります。最初の2つは期待通りに動作し、3つ目は期待通りに動作しません。

render() { 
    const pageMain = (
     <PageMain token={this.state.token} /> 
    ); 
    const pageActivity = (
     <PageActivity 
      projectActivities={this.state.projectActivities} 
      projectActivitiesMap={this.state.projectActivitiesMap} /> 
    ); 
    return (<Router> 
     <div> 
      <Route 
       path="/" 
       component={PageSplash} 
      /> 
      <Route 
       path="/app" 
       render={props => pageMain} 
      /> 
      <Route 
       path="/activity/:activityId/" 
       render={props => pageActivity} 
      /> 
     </div> 
    </Router>); 
} 

私は www.example.com/ に行くとき予想通り、ルータは私のPageSplashコンポーネントに私を指示します。

www.example.com/appにアクセスすると、ルーターは私のPageMainコンポーネントに期待通りに私を誘導します。さらに、私のPageMainコンポーネントでは、私は期待通りにthis.props.tokenにアクセスしています。

www.example.com/activity/12345/にアクセスすると、ルータは私のPageActivityコンポーネントを期待どおりに誘導します。私のPageActivityコンポーネントでは、私はthis.props.projectActivitiesとthis.props.projectActivitiesMapにアクセスしています。しかし、URLからactivityIdにアクセスできるようにしたいと考えています。この場合、12345にする必要があります。 PageActivityでは、無数のドキュメントを読んで、私が思ったようにthis.props.paramsを受け取っていません。

私は最初のもののような単純なルートを使って始めました。その後、トップレベルのコンポーネントから/ appルートにデータを渡す必要があったので、component小道具の代わりに<Route />render小道具を使い始める。これは正常に動作します。それから、データを渡してURLパラメータにアクセスする必要がありました。私は渡された小道具にアクセスできますが、私のPageActivityコンポーネントはparams小道具を受け取っていません。 PageActivityコンポーネントのactivityIdにアクセスするにはどうすればよいですか？

Answer 1

私はこれを行う方法を理解しました。 PageActivityコンポーネントをインライン化し、{...props}を追加する必要がありました。問題のルートは次のようになります。また

<Route path="/activity/:activityId/" render={props => (
    <PageActivity 
     projectActivities={this.state.projectActivities} 
     projectActivitiesMap={this.state.projectActivitiesMap} 
     {...props} 
    /> 
)} /> 

、反応-ルータ-DOM 4.0.0で、ページのparamsはthis.props.match.paramsに渡されます。