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

【问题标题】：React Router v6 Route element cannot get Context valueReact Router v6 Route 元素无法获取上下文值
【发布时间】：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

标签： reactjs react-hooks react-router-dom react-context

【解决方案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 />;

【讨论】：