Hola, necesito ayuda para que mi código funcione, de modo que cuando intente volver a iniciar sesión no pueda ver el tablero desde que me desconecté. En este momento me está dando una pantalla en blanco en mi proyecto y creo que es porque la ruta privada ya no existe. No estoy seguro. Este es mi código en PrivateRoute.js:
import React, { Component } from 'react'; import { Route, Navigate } from 'react-router-dom'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; const PrivateRoute = ({ component: Component, auth: { isAuthenticated, loading }, ...rest }) => ( <Route {...rest} render={props => !isAuthenticated && !loading ? (<Navigate to='/login' />) : (<Component {...props} />)} /> ) PrivateRoute.propTypes = { auth: PropTypes.object.isRequired }; const mapStatetoProps = state => ({ auth: state.auth }); export default connect(mapStatetoProps)(PrivateRoute);Este es el código para app.js:
import React, { Fragment, useEffect } from 'react'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import Navbar from './components/layout/Navbar'; import Landing from './components/layout/Landing'; import Register from './components/auth/Register'; import Login from './components/auth/Login'; import Alert from './components/layout/Alert'; import Dashboard from './components/dashboard/Dashboard'; import PrivateRoute from './components/routing/PrivateRoute'; // Redux import { Provider } from 'react-redux'; import store from './store'; import { loadUser } from './actions/auth'; import setAuthToken from './utils/setAuthToken'; import './App.css'; if (localStorage.token) { setAuthToken(localStorage.token); } const App = () => { useEffect(() => { store.dispatch(loadUser()); }, []); return ( <Provider store={store}> <Router> <Fragment> <Navbar /> <Routes> <Route exact path='/' element={<Landing/>} /> </Routes> <section className="container"> <Alert /> <Routes> <Route exact path='/Register' element={<Register/>} /> <Route exact path='/Login' element={<Login/>} /> <PrivateRoute exact path='/dashboard' element={Dashboard} /> </Routes> </section> </Fragment> </Router> </Provider> )}; export default App;¡Por favor ayuda!
hay una implementación de ruta protegida recomendada en los documentos del enrutador de reacción v6 que puede seguir.
Tu problema:
<Route {...rest} render={props => !isAuthenticated && !loading ? (<Navigate to='/login' />) : (<Component {...props} />)} />Esta ruta no está actualizada con v6, que supongo que está utilizando, debe actualizarla.
Exact ya no es compatible, no tiene sentido incluirlo en sus rutas.
Si no está utilizando v6, actualice su publicación e incluya su versión de enrutador de reacción.