Reactjs React不会将组件呈现到url'；使用动态路由的

我正在尝试匹配url路径以执行动态路由，但组件没有在路径处呈现。我做错了什么

顺便说一句，到CollectionsOverview组件的路由正在工作

Shop Component.js：

onst ShopPage=（{match}）=>{
log（`Shop Component${match.path}`）；
返回(
);
};
导出默认商店页面；

---

Collection Component.js：

const CollectionPage=（）=>{
log（`Collection Page`）；
返回(
你好
);
};

---

结果:

---

将

/${match.path}/:collectionId

路径放在

/${match.path}

之前，并从路由中删除

精确的

以下是工作代码：

import React，{useffect}来自“React”；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter，Route，Switch，Link}；
const CollectionOverview=（）=>{
返回(
CollectionOverview

到集合1

到集合2

到集合3

到集合4

);
};
const CollectionPage=props=>{
返回ID为{props.match.params.ID}的CollectionPage；
};
常量HomeComponent=（）=>{
回家组件；
};
函数App（）{
返回(
回家


收藏概述


);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

请不要将图像用作代码示例。只需将它们粘贴在这里或JSFIDLE中即可。如果你不听取建议，人们会更难帮助你。米克，用代码更新问题。请提供答案。

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

export default ShopPage;

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

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";

const CollectionOverview = () => {
  return (
    <div>
      <div>CollectionOverview</div> <br />
      <Link to="/collection/1">To Collection 1</Link> <br />
      <Link to="/collection/2">To Collection 2</Link> <br />
      <Link to="/collection/3">To Collection 3</Link> <br />
      <Link to="/collection/4">To Collection 4</Link> <br />
    </div>
  );
};

const CollectionPage = props => {
  return <div>CollectionPage for ID: {props.match.params.id}</div>;
};

const HomeComponent = () => {
  return <div>Home Component</div>;
};

function App() {
  return (
    <BrowserRouter>
      <div>
        <Link to="/">To Home</Link>
        <br />
        <Link to="/collection">To Collection Overview</Link>
        <br />
      </div>
      <Switch>
        <Route path="/collection/:id" component={CollectionPage} />
        <Route path="/collection" component={CollectionOverview} />
        <Route path="/" component={HomeComponent} />
      </Switch>
    </BrowserRouter>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);