2017-10-31 26 views
0

に反応のこのexampleはルータv4のネストされたコンポーネント内にネスト

{/* NESTED ROUTES */} 
    <Route path={`${match.url}/:topicId`} component={Topic}/> 
    <Route exact path={match.url} render={() => (
    <h3>Please select a topic.</h3> 
)}/> 

ネストされたルートが正常に動作してみましょう。ただし、ネストされたルート内でルートをネストするにはどうすればよいですか?例:

path={`${match.url}/:topicId/edit`} component={EditTopic} 

入れ子にするレベルの良さと悪い練習ガイドはありますか?すべてのヒント/ガイダンスが評価されています!

答えて

1

どのようにネストされたルート内のI巣ルートすることができますを構築するための便利な?

リアクタルーターv4では、他のコンポーネントと同じようにRouteと考えることをお勧めします。これは、あなたのインターフェイスを構成するのに役立ちます何が起こっているのURLで。

Routeを入れ子にしたり、コンポーネントツリーの深いところでURLを使用してインターフェイスを変更したりするのは気にならないはずです。

例では、Topicコンポーネントまたはrenderプロップとして渡された関数のいずれかで、Routeをさらにネストすることができます。

入れ子にするレベルの数については、良い/悪い練習ガイドがありますか?

これは大きな質問です。他の多くのものと同様に、それは味わいになります。あなたのコードを他の人のために理解しやすくし、6ヵ月後に自分自身で理解してください。

旧式のアプローチを採用し、すべてのルートを1つのコンポーネントに保存するのが最も簡単な場合があります。それ以外の場合は、4段階のネストを使用する方がよいでしょう。

私のチームでは、v4を採用し、複数のネスティングレイヤーを使用しています。道に沿って、我々は誰もがそのアプローチについて明確であることを確認するために多くの会話をしました。

注意:深いネスティングを例として使用する場合は、 redux connectまたはPureComponentと反応した場合、ネストされたRouteの位置更新をブロックする可能性があることに注意してください。 RouteがURLの変更に応答しない場合、これが起こっていることがわかります。これを解決するにはwithRouterを使用してください。

0

match.urlの代わりに、mを使用してネストされたルートを構築する必要があります。 (文字列)と一致するために使用される経路パターン - matchdocumentation

パスによります。入れ子にするのに便利です<Route>s

url - (文字列)URLの一致部分です。ネストされた<Link>s

関連する問題