时间戳

首页 > 解决方案 > 内部特定路线上的上下文提供者

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

问题描述

使用 a<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可以更好地工作吗？

标签： reactjsreact-routerreact-context

解决方案

可能有点晚了，但它可能会在未来帮助其他人：

如果您只想分离上下文并且将其专属于某些路由，则必须创建另一个开关并分离共享相同上下文的每个路由，如下所示：

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

推荐阅读