#reactjs #react-hooks #react-router-dom #react-context
Вопрос:
Прямо сейчас я использую React 17.0.2 , react-router-dom 6.0.2 в своем приложении.
Я пытаюсь использовать контекст реакции и маршрут для добавления аутентификации на маршрутах.
В App.js я могу получить значение из AuthContext
... const { authState, authReducer } = useContext(AuthContext); lt;Routesgt; lt;Route element={PrivateRoute}gt; lt;Route path="/dashboard/*" element={lt;MainLayout /gt;} /gt; lt;/Routegt; lt;Routegt; lt;Route path="/auth/*" element={lt;EmptyLayout /gt;} /gt; lt;/Routegt; lt;Route path="*" element={NotFound} /gt; lt;/Routesgt; ... но в PrivateRoute я получил неопределенное
const {authState, authReducer} = useContext(AuthContext); const {state, dispatch} = authState; const ele = state.login === true ? lt;Outlet /gt; : lt;Navigate to="/login" replace /gt;; return lt;Route path={path} element={ele} /gt;; В этом случае, как я могу получить AuthContext в PrivateRoute?
Спасибо
Комментарии:
1. где вы создаете контекст? вы экспортируете его на частный маршрут?
2. контекст создается в AuthContext.jsx и импортируется в
App.jsиPrivateRoute
Ответ №1:
Вы не передаете JSX element реквизитам маршрута. Макет должен отображать компонент частного маршрута (и выход для вложенных маршрутов).
lt;Routesgt; lt;Route path="/dashboard/*" element={( lt;MainLayoutgt; lt;PrivateRoute /gt; lt;/MainLayoutgt; )} gt; ... protected children subroutes ... lt;/Routegt; lt;Routegt; lt;Route path="/auth/*" element={lt;EmptyLayout /gt;} /gt; lt;/Routegt; lt;Route path="*" element={lt;NotFound /gt;} /gt; lt;/Routesgt; Route компоненты могут быть только дочерними Routes по отношению к компоненту, поэтому PrivateRoute не могут отображать его, ему просто нужно отображать либо Outlet для вложенных маршрутов, либо Navigation для перенаправления.
const { authState } = useContext(AuthContext); const { state, dispatch } = authState; return state.login ? lt;Outlet /gt; : lt;Navigate to="/login" replace /gt;;