React路由器未呈现正确的组件

Question

我在react路由方面遇到了一个奇怪的问题，这可能只是一些愚蠢的事情。I一个渲染组件的路由/products。现在我正在尝试创建另一个路由/products/:id/confirmation-email，但react将我重定向到products组件。如果我将这两个路由中的任何一个更改为其他路由，它都可以正常工作。

<ProtectedRoute
        path="/products"
        component={Products}
/>

<ProtectedRoute
        path="/products/:id/confirmation-email"
        component={ConfirmationEmail}

/>

Answer 1

尝试将确认路径移到代码中产品路径的上方，如下所示。

<ProtectedRoute
        path="/products/:id/confirmation-email"
        bootIntercom={bootIntercom}
        trackPageVisitOnMixpanel={trackPageVisitOnMixpanel}
        component={ConfirmationEmail}

/>

<ProtectedRoute
        path="/products"
        bootIntercom={bootIntercom}
        trackPageVisitOnMixpanel={trackPageVisitOnMixpanel}
        component={Products}
/>

Answer 2

试着在你的路线中通过exact道具。

  <ProtectedRoute
            exact 
            path="/products"
            bootIntercom={bootIntercom}
            trackPageVisitOnMixpanel={trackPageVisitOnMixpanel}
            component={Products}
    />

<ProtectedRoute
        exact  
        path="/products/:id/confirmation-email"
        bootIntercom={bootIntercom}
        trackPageVisitOnMixpanel={trackPageVisitOnMixpanel}
        component={ConfirmationEmail}