反应路由器与上下文

Question

我用上下文包装了一些私有路由，但由于某种原因它没有移动到交换机中的下一个路由。

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>
);

只是想知道是否有更好的方法来解决这个问题？这是不好的做法吗？

Answer 1

这样做有用吗？

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

反应路由器与上下文

React Router with Context

javascript

reactjs

react-router

react-context