嵌套路由不适用于反应路由器

Question

I've been trying to render out CollectionPage and match the url with my page but my nested Route that's calling CollectionPage doesn't work for some reason!

here's a snippet from my shop.component that is being called at app.js

 import React from 'react'; import { Route } from 'react-router-dom'; import CollectionOverview from '.././../components/collections-overview/collections-overview.component'; import CollectionPage from '../collection/collection.component'; const ShopPage = ({ match }) => ( <div className='shop-page'> <Route exact path={`${match.path}`} component={CollectionOverview} /> <Route path={`${match.path}/:collectionId`} component={CollectionPage} /> </div> ); export default ShopPage;

Answer 1

When I did this course an issue I had was that in App.js I had set exact for the shop route. Maybe you have it too :D

Answer 2

我发现了发生了什么，在我的 app.js 中我不小心设置了我的 path='/shop/' 所以我只需要删除第二个 '/'