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

Question

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

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在不调用错误的情况下抛出错误。