反应路由器没有呈现正确的组件

Question

I am having a weird problem with react routing and this might just be something stupid. I a route /products which renders a component. Now I am trying to make another route /products/:id/confirmation-email but react redirects me to the products component. If I change either of the routes to something else it works fine.

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

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

/>

Answer 1

Try passing exact props inside your route.

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

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

Answer 2

Try moving the confirmation route above the products route in your code like this.

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

/>

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