Reactjs - ネストされたルーティングに正しいコンポーネントが表示されない

ShopPage コンポーネントから CollectionPage コンポーネントを、collectionId をパラメータとして受け取るネストされたルートとして表示しようとしていますが、空のページが表示されます。 これらは私のコンポーネントです。

ショップページ:

import React from 'react';
import CollectionsOverview from '../../components/collections-overview/collections-overview.component';
import { Route } from 'react-router-dom'
import CollectionPage from '../collection/collection.component';

const ShopPage = ({ match }) => (
    <div className='shop-page'>
        < Route exact path={`${match.path}`} component={CollectionsOverview} />
        <Route exact path={`${match.path}/collectionId`} component={CollectionPage} />
    </div>
)

export default ShopPage;

CollectionPage コンポーネント:

import React from 'react';
import CollectionItem from '../../components/collection-item/collection-item.component';
import './collection.styles.scss';


const CollectionPage=({match})=>{
    console.log(match);
    return(
    <div className="collection-page">
        <h2>Collection Page</h2>
    </div>
)}

export default CollectionPage;

そのページにアクセスするにはどうすればよいですか?

– ブサジュラ ブラヒム

2020 年 9 月 3 日 11:50

localhost:3000/shop/hats (例 )

– アミン

2020 年 9 月 3 日 12:02

帽子はパラメータです

– ブサジュラ ブラヒム

2020 年 9 月 3 日 12:03

はい、そのとおりです。redux 状態からそのパラメータを動的に取得することになっています

– アミン

2020 年 9 月 3 日 12:12

1

<Route path="/shop" から完全一致を削除します。コンポーネント={ショップページ} /> App.tsx でこれをチェックしてください

– ブサジュラ ブラヒム

2020 年 9 月 3 日 16:27

------------------------

collectionId は、先頭に : like : を付ける必要があるパラメータのようです。

 <Route exact path={`${match.path}/:collectionId`} component={CollectionPage} />

そして <Route path="/shop" から「exact」を削除します。コンポーネント={ショップページ} /> App.tsx でこれをチェックしてください

3

それを試してみたところ、現在のルートの後に入力した内容が、CollectionPage コンポーネントの小道具の match オブジェクトのパラメータとして取得されることを期待していました。しかし、それでもルートは機能しません。

– アミン

2020 年 9 月 3 日 11:55

そのページにアクセスするにはどうすればよいですか?

– ブサジュラ ブラヒム

2020 年 9 月 3 日 11:57

localhost:3000/shop/hats (例 )

– アミン

2020 年 9 月 3 日 12:03