reactjs - 内特定路由的上下文提供者

Question

使用 <Switch>帮助我将错误的地址指向起始页并处理用户访问限制(对某些页面)。

但我似乎无法再将 Context-providers 用于它们的特定路由。

问题是我不希望上下文提供者环绕所有路由/组件。

// App.js
<Router>
  <RoleInfoProvider>
    <AccessWrapper>
      <NavBar />
      
      <TimesheetProvider>

                  <Switch>
                    <PrivateRoute exact path="/approvals"component={Approvals} />
                    <PrivateRoute exact path="/reports" component={Reports} />
                    <Route exact path="/timesheet" component={Timesheet} />
                    <Route component={Start} />
                  </Switch>

      </TimesheetProvider>

    </AccessWrapper>
  </RoleInfoProvider>
</Router>

虽然实际上，我更愿意拥有 <TimesheetProvider>仅像这样环绕:

<Switch>
  <PrivateRoute exact path="/approvals"component={Approvals} />
      
  <TimesheetProvider>

    <PrivateRoute exact path="/reports" component={Reports} />
    <Route exact path="/timesheet" component={Timesheet} />

  </TimesheetProvider>

  <Route component={Start} />
</Switch>

当我访问 /timesheet/ 时会发生什么都是Reports和 Timesheet被渲染。

我意识到这可能是我的 ProtectedRoute 的问题所以我也会向您展示该组件。

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import useRoleInfo from '../hooks/useRoleInfo';

function ProtectedRoute({ path, ...rest }) {
  const { roleInfo } = useRoleInfo();

  if (
    (path === '/approvals' && roleInfo.canAccessApprovals) ||
    (path === '/reports' && roleInfo.canAccessReports)
  ) {
    return <Route {...rest} />;
  }

  return <Redirect to="/" />;
}

export default ProtectedRoute;

知道如何使用 Context-providers和 Router-Switch可以更好地工作吗？

Answer 1

这可能有点晚了，但它可能对以后的其他人有帮助:

如果你只想分离上下文，并让它独占某些路由，你必须创建另一个开关并分离共享相同上下文的每个路由，如下所示:

<Router>
  <RoleInfoProvider>
    <AccessWrapper>
      <NavBar />
        <Switch>
          <TimesheetProvider>
            <PrivateRoute exact path="/reports" component={Reports} />
            <Route exact path="/timesheet" component={Timesheet} />
          </TimesheetProvider>
        </Switch>
        <Switch>
          <PrivateRoute exact path="/approvals"component={Approvals} />
          <Route component={Start} />
        </Switch>
    </AccessWrapper>
  </RoleInfoProvider>
</Router>

出于某种原因，当您使用一个独特的 Switch 并将上下文提供程序直接放置在其中时，其余路由将无法正常工作、出现、执行或类似情况。可能是由于上下文冲突，因为 Route 已经用一些上下文渲染，突然我们添加了另一个上下文， react 抛出错误而不调用错误。