どのようにしてルート衝突を回避できますか？

Question

ユーザーが/Products/1を訪問したときに<Product>をレンダリングします。

ユーザーが/Products/newを訪問したときに<CreateProduct>をレンダリングしたいとします。

私のルータがそうのようになります。ユーザーは/Products/newを閲覧

<Route exact path="/Products/new" component={CreateProduct} /> 
<Route exact path="/Products/:productId" component={Product} /> 

場合は、再Productコンポーネント投げるエラーにルートと結果の両方にマッチします。id newで製品を見つけることではありません。

これを避けるために、反応ルータのドキュメントで何かを見つけることができませんでした。私は潜在的に、このハックを使用していますが、 "より良い" の方法がなければならないことができます：

const renderProduct = props => 
    props.match.params.productId === 'new' 
    ? null 
    : <Product {...props} />; 

Answer 1

使用<Switch />：

<Switch> 
    <Route exact path="/Products/new" component={CreateProduct} /> 
    <Route exact path="/Products/:productId" component={Product} /> 
</Switch> 

<Route exact path="/Products/new" component={CreateProduct} /> 
<Route exact path="/Products/:productId" render={renderProduct} /> 

<Product>ルートをレンダリングする機能を使用して

最初の試合を見つけようとします。 したがって/Products/newは最初のルートと一致し、2番目のルートをスキップします。 /Products/1は秒と一致します。