React Router v6 Route 元素无法获取上下文值

Posted 2023-02-22

【中文标题】React Router v6 Route 元素无法获取上下文值

【英文标题】：React Router v6 Route element cannot get Context value

【发布时间】：2021-12-25 06:30:30

【问题描述】：

我现在在我的应用中使用 React 17.0.2, react-router-dom 6.0.2。

我尝试使用 react Context 和 Route 在路由上添加身份验证。

在App.js 我可以从 AuthContext 中获得价值

...

const  authState, authReducer  = useContext(AuthContext);
    
<Routes>
    <Route element=PrivateRoute>
         <Route path="/dashboard/*" element=<MainLayout /> />
    </Route>
    <Route>
        <Route path="/auth/*" element=<EmptyLayout /> />
    </Route>
    <Route path="*" element=NotFound />
</Routes>
...

但是在PrivateRoute 我得到了未定义

const authState, authReducer = useContext(AuthContext);

const state, dispatch = authState;
const ele = state.login === true ? <Outlet /> : <Navigate to="/login" replace />;
return <Route path=path element=ele />;

在这种情况下，如何在 PrivateRoute 中获取 AuthContext？

谢谢

【问题讨论】：

你在哪里创建上下文？你是把它导出到私有路由吗？

上下文在 AuthContext.jsx 中创建并导入 App.js 和 PrivateRoute

【参考方案1】：

您没有将 JSX 传递给路由的 element 道具。布局应该呈现私有路由组件（嵌套路由的出口）。

<Routes>
  <Route
    path="/dashboard/*"
    element=(
      <MainLayout>
        <PrivateRoute />
      </MainLayout>
    )
  >
    ... protected children subroutes ...
  </Route>
  <Route>
    <Route path="/auth/*" element=<EmptyLayout /> />
  </Route>
  <Route path="*" element=<NotFound /> />
</Routes>

Route 组件只能是 Routes 组件的子组件，因此 PrivateRoute 不能渲染一个，它只需要渲染嵌套路由的 Outlet 或重定向的 Navigation。

const  authState  = useContext(AuthContext);
const  state, dispatch  = authState;

return state.login ? <Outlet /> : <Navigate to="/login" replace />;