Estoy trabajando en el clon de Disney+, etc. y estaba tratando de hacer algo como: si el usuario no está autorizado, muestre la página de inicio de sesión, pero si está autorizado, muestre el contenido. Usé useHistory para esto. Y funciona por un segundo, simplemente comienza a descargar la página de inicio de sesión (la imagen de fondo se está cargando, pero el texto de la página de inicio de sesión está visible) y luego desaparece y se muestra la página de contenido. La URL también cambia por un segundo.
Aplicación.js
function App() { return ( <div className="App"> <Router> <Header /> <Switch> <Route path="/login"> <Login/> </Route> <Route path="/detail/:id"> <Detail/> </Route> <Route path="/"> <Home/> </Route> </Switch> </Router> </div> ); }Encabezado.js
import React from 'react' import {selectUserName, selectUserPhoto, setUserLogin, setUserSignOut} from '../../features/user/userSlice' ; import { useDispatch, useSelector } from "react-redux" ; import { auth, provider} from "../../firebase" import { useHistory} from 'react-router-dom'; const Header = () => { const dispatch = useDispatch() const userName = useSelector(selectUserName); const userPhoto = useSelector(selectUserPhoto); const history = useHistory(); const signIn = () => { auth.signInWithPopup(provider) .then((result) => { let user = result.user; dispatch(setUserLogin({ name: user.displayName, email: user.email, photo: user.photoURL })) history.push('/'); }) } const signOut = () => { auth.signOut() .then(() => { dispatch(setUserSignOut()); history.push('/login'); }) } }Según su problema, puede manejar las rutas de una manera diferente. Por lo tanto, tiene rutas que solo se pueden mostrar durante una situación no autorizada y algunas rutas solo se muestran para usuarios autorizados. Para eso puedes tener la siguiente implementación.
Primero puede crear la función ProtectedRoute .
import React from "react"; import { Redirect, Route } from "react-router-dom"; function ProtectedRoute({ component: Component, ...restOfProps }) { const isAuthenticated = localStorage.getItem("isAuthenticated"); console.log("this", isAuthenticated); return ( <Route {...restOfProps} render={(props) => isAuthenticated ? <Component {...props} /> : <Redirect to="/login" /> } /> ); } export default ProtectedRoute;Y luego puede usar esta función en su aplicación principal donde declarará sus rutas con componente.
import ProtectedRoute from "./component/ProtectedRoute"; function App() { return ( <div className="App"> <BrowserRouter> <Route path="/login" component={Login} /> <ProtectedRoute path="/protected" component={ProtectedComponent} /> </BrowserRouter> </div> ); } export default App;