<Switch> 内特定路由上的上下文提供程序答案

【问题标题】：Context-provider on specific routes inside <Switch><Switch> 内特定路由上的上下文提供程序
【发布时间】：2020-12-11 09:46:00
【问题描述】：

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

但我似乎无法再将上下文提供者用于他们的特定路线。

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

// 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 吗？

【问题讨论】：

标签： reactjs react-router react-context

【解决方案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 会抛出一个错误而没有调用错误。

【讨论】：