Блог

Я построил собственный маршрут с помощью проверки подлинности API из опорного пункта V9 и реагировать-маршрутизатор-дом V6 и получить доступ к админ-части, когда я войти в его перенаправить меня на страницу администрирования, но страница пустая и консоль лог это «реагировать.jsx: тип недопустим-ожидается строка (для встроенных компонентов) или класс/функция (для составных компонентов), но получил: не определен.» И попросите меня «Проверить ваш код на PrivateRoute.jsx:7″. Спасибо вам за вашу помощь =).

Приватный маршрут.jsx

 import React from 'react' import {Navigate} from 'react-router-dom' import { auth } from '../../Firebase'  function PrivateRoute({component: Component}) {  const user = auth.currentUser  return user ? lt;Component /gt; : lt;Navigate to='/login'/gt;   } export default PrivateRoute  

App.jsx (где используется частный маршрут)

 import {BrowserRouter, Route, Routes } from 'react-router-dom'; import Admin from './Components/Admin/Admin'  function App() {  return (  lt;BrowserRoutergt;  lt;div className="App"gt;  lt;Routesgt;  lt;Route   path="/admin"   element={  lt;PrivateRoutegt;  lt;Admin /gt;  lt;/PrivateRoutegt;   }   /gt;  lt;/Routesgt;  lt;/divgt;  lt;/BrowserRoutergt;   ); }  export default App;  

Я даю вам файл Firebase и AuthContext, чтобы выяснить

Firebase.js

 import {initializeApp} from 'firebase/app' import {serverTimestamp, getFirestore} from 'firebase/firestore' import {getStorage} from 'firebase/storage' import {getAuth} from'firebase/auth'  const firebaseConfig = { config } const app = initializeApp(firebaseConfig) export const timestamp = serverTimestamp() export const projectFirestore= getFirestore(app) export const projectStorage= getStorage(app) export const auth = getAuth(app)  export default app  

AuthContext.jsx

 import {useContext, useState, useEffect, createContext} from 'react' import { auth } from '../../Firebase' import { createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, onAuthStateChanged} from "firebase/auth";  const AuthContext = createContext()  export function useAuth() {  return useContext(AuthContext) }  export function AuthProvider({children}) {  const [currentUser, setCurrentUser] = useState()  const [loading, setLoading] = useState(true)    function register(email, password){  return createUserWithEmailAndPassword(auth, email, password)  }    function login(email, password){  return signInWithEmailAndPassword(auth, email, password)  }   function logout() {  signOut(auth)  }   useEffect(() =gt;{  const unsubscribe = onAuthStateChanged(auth ,(user) =gt; {  setCurrentUser(user)  setLoading(false)  })  return unsubscribe  }, [])   const value = {  currentUser,  login,  register,  logout  }   return (  lt;AuthContext.Provider value={value}gt;  {!loading amp;amp; children}  lt;/AuthContext.Providergt;  ) }  

Способ аутентификации в RRDv6 значительно изменился по сравнению с v5. Исчезли пользовательские компоненты маршрута, замененные компонентами-оболочками.

Дано:

 lt;BrowserRoutergt;  lt;div className="App"gt;  lt;Routesgt;  lt;Route  path="/admin"  element={(  lt;PrivateRoutegt;  lt;Admin /gt;  lt;/PrivateRoutegt;  )}  /gt;  lt;/Routesgt;  lt;/divgt; lt;/BrowserRoutergt;  

PrivateRoute Оболочке просто нужно отобразить свою children опору вместо component опоры.

 function PrivateRoute({ children }) {  const user = auth.currentUser;  return user ? children : lt;Navigate to='/login' replace /gt;; }  

Однако распространенным шаблоном является визуализация в Outlet компоненте вместо этого и перенос вложенных защищенных маршрутов.

Пример:

 import { Navigate, Outlet } from 'react-router-dom';  const PrivateWrapper = () {  const user = auth.currentUser;  return user ? lt;Outlet /gt; : lt;Navigate to='/login' replace /gt;; }  

…

 lt;BrowserRoutergt;  lt;div className="App"gt;  lt;Routesgt;  lt;Route path="/admin" element={lt;PrivateWrapper /gt;} gt;  lt;Route path="/admin" element={lt;Admin /gt;} /gt;  ... other nested protected routes ...  lt;/Routegt;  lt;/Routesgt;  lt;/divgt; lt;/BrowserRoutergt;