嵌套路由未显示正确的组件答案

【问题标题】：Nested Routing is not displaying the right Component嵌套路由未显示正确的组件
【发布时间】：2020-12-22 15:37:53
【问题描述】：

我正在尝试将 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;

【问题讨论】：

您如何访问该页面？
localhost:3000/shop/hats（例如）
所以hats是一个参数
是的，我应该从我的 redux 状态动态获取该参数
从 App.tsx 中的 <Route path="/shop" component={ShopPage} /> 中删除 exact 检查 this

标签： reactjs react-router nested-routes

【解决方案1】：

看来collectionId是一个参数，应该以:为前缀，比如：

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

并从 App.tsx 中的 <Route path="/shop" component={ShopPage} /> 中删除 exact 检查 this

【讨论】：

我试过了，并希望得到我在当前路由之后输入的任何内容，作为 CollectionPage 组件道具中匹配对象中的参数。但是，这条路线甚至行不通。
您如何访问该页面？
localhost:3000/shop/hats（例如）