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?

benjaminknox · Accepted Answer · 2022-03-05 19:04:34Z

1

Does it work if you do this?

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

answered Mar 5, 2022 at 19:04

benjaminknox

2874 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gurneet Singh Over a year ago

That does work! Thank you for the quick response! Is there a reason why the prior wasn't working?

benjaminknox Over a year ago

The context of the BasketProvider component was outside PrivateRoute so it wouldn't load at the same time as Checkout

Collectives™ on Stack Overflow

React Router with Context

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related