React-Router呈现空白

Question

CollectionsOverview组件正在渲染时，与组件CollectionPage相对应的页面没有呈现。我不知道为什么前者没有得到渲染。

import React from 'react';
import { Route} from 'react-router-dom';

import CollectionsOverview from '../../components/collection-overview/collection-overview.component';
import CollectionPage from '../collectionPage/collectionPage.component'
import { Switch } from 'react-router-dom';


const ShopPage = ({ match }) => (

  <div className='shop-page'>
    {console.log(match)}
    <Switch>
    <Route path={`${match.path}/:collectionId`} component={CollectionPage} />
    <Route exact path={`${match.path}`} component={CollectionsOverview} />
    </Switch>
  </div>
);

export default (ShopPage);