アクセスするURLパラメータで反応し、ルータ

Question

を私はこのような私のルートを宣言：私は見ることができます<Route>で

<Link to={`/services/edit/${record.id}`}>Edit</Link> 

：

は

<Row> 
    <Route exact path="/services" render={() => <RoutesList {...this.props} />} /> 
    <Route exact path="/services/new" render={() => <AddRoute {...this.props} />} /> 
    <Route exact path="/services/edit/:id" render={() => <AddRoute />} /> 
</Row> 

はその後、私のコードのいくつかの部分で私はこのようなリンクを作成idはmath.paramsだが<AddRoute>{...this.props}たとえば<AddRoute {...this.props}>を渡しても、このURLパラメータにアクセスすることはできません。urlパラメータは表示されず、一致するものは空です。 私のパッケージは次のとおりです。

"react-router": "^4.1.1", 
"react-router-dom": "^4.1.1", 
"react-router-redux": "^5.0.0-alpha.6", 

Answer 1

あなたJSXコードは、上記もちろんマッチオブジェクトが含まれていないレンダリングコンポーネントの小道具。どうした？機能をレンダリング、インラインでコンポーネントに小道具を渡す方法についてdocsの例を参照してください：

// convenient inline rendering 
<Route path="/home" render={() => <div>Home</div>}/> 

// wrapping/composing 
const FadingRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
    <FadeIn> 
     <Component {...props}/> 
    </FadeIn> 
)}/> 
) 

<FadingRoute path="/cool" component={Something}/> 

インラインrender()関数はのを取得するには、3つのルートの小道具match、location、historyを可決しました。あなたの矢印render()が受け取る小道具をあなたのコンポーネントに渡さなければなりません。あなたはAddRouteコンポーネントでthis.props.match.idにアクセスすることができますより：

<Row> 
    <Route exact path="/services" render={() => <RoutesList {...this.props} />} /> 
    <Route exact path="/services/new" render={() => <AddRoute {...this.props} />} /> 
    <Route exact path="/services/edit/:id" render={props => <AddRoute {...props} />} /> 
</Row> 

また、あなたは常に、子コンポーネントへのすべての小道具を渡すべきではありません。

<Route exact path="/services/edit/:id" render={props => <AddRoute id={props.match.id} /> 

また、あなたがthis.propsを広め、あなたの他のコンポーネントに適用される場合があります：あなたAddRouteコンポーネントは、あなただけのIDを渡す必要があるよりも、idでのみ関心がある場合。コンポーネントに関連する小道具だけを渡すか、デバッグするのが非常に難しい大きな混乱に終わるでしょう。