React Router with Context

Question

I'm wrapping some private routes with a context, but for some reason it doesn't move to the next route in the switch.

export const Routes = () => (
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/seller/:userName" component={userProfile} />
    <Route path="/allproducts" component={AllProducts} />
    <Route path="/privacy" component={Privacy} />
    <Route path="/terms" component={Terms} />
    <Route path="/contact" component={Contact} />
    <Route path="/about" component={About} />
    <Route path="/learnmore" component={LearnMore} />
    <Route path="/faq" component={FAQ} />
    <PublicRoute path="/login" component={Login} />
    <PublicRoute path="/signup" component={SignUp} />
    <PublicRoute path="/reset" component={ForgotPassword} />
    <PublicRoute path="/resetToken" component={ForgotPasswordToken} />
    <PrivateRoute exact path="/userprofile" component={UserDashboard} />
    <PrivateRoute exact path="/submitplate" />

// This works but doesn't allow the router to move to the next potential route.

    <BasketProvider>
      <PrivateRoute exact path="/checkout" component={Checkout} />
    </BasketProvider>

// This never gets reached. 

    <Route component={NoMatchPage} />

  </Switch>
);

Just wondering if theres a better way to go around this? Is this bad practice?

Answer 1

Does it work if you do this?

 <PrivateRoute exact path="/checkout" component={() => (
   <BasketProvider>
     <Checkout />
   </BasketProvider>
 )} />