React动态路由路径无法渲染组件问题排查求助

嘿，我仔细瞅了你的代码，发现问题根源出在路由路径的拼接方式上！

问题所在 #

match.path本身已经包含了开头的斜杠（比如如果你的ShopPage是通过/shop这个路由匹配进来的，match.path的值就是/shop）。而你在代码里给路径又额外加了一个/，导致最终生成的路径变成了//shop和//shop/:collectionId——这种重复的斜杠会干扰React Router的匹配逻辑，虽然exact模式下的CollectionsOverview可能碰巧能正常匹配，但动态路由的/:collectionId就会因为路径格式异常而无法正确触发。

修复后的代码 #

只需要去掉路径前面多余的/，直接使用match.path拼接即可：

const 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;

额外验证建议 #

你可以在ShopPage的console.log里确认match.path的具体值，就能直观看到它本身已经包含了开头的斜杠，这时候再额外拼接/就会造成路径格式错误。另外也确认下CollectionPage组件已经正确导入到ShopPage中（不过从CollectionsOverview能正常渲染来看，导入逻辑应该没问题）。

内容的提问来源于stack exchange，提问作者n00b Programmer