Se da una aplicación con 3 páginas:
"Pagina principal"
"Página privada"
"Página de administración de usuarios"
Después de un inicio de sesión exitoso, el usuario es redirigido a una "Página privada" . En la "PrivatPage" el usuario tiene la posibilidad de volver a la "MainPage" o ir a la "UserManagementPage" . La parte con la redirección de "MainPage" a "PrivatPage" funciona. El código se ve así:
import PublicPage from "./components/PublicPage"; import PrivatePage from "./components/PrivatePage"; import UserManagementPage from "./components/UserManagementPage"; import React, { useState, Component } from "react"; import { connect } from "react-redux"; const mapStateToProps = state => { return state; }; class App extends Component { render() { const accessToken = this.props.accessToken; console.log(accessToken); let workspace; if (accessToken) { workspace = <PrivatePage />; } else { workspace = <PublicPage />; } return <div className="App">{workspace}</div>; } } export default connect(mapStateToProps)(App);Pero, ¿cómo uso los condicionales para llegar a la " Página de administración de usuarios"?
si considera componentes funcionales, puede usar BrowserRouter de la siguiente manera con react-router-dom . Si necesita manejar la autenticación, puede crear un componente <PrivateRoute /> personalizado y usarlo en sus rutas protegidas en lugar de <Route /> . Siempre mantengo estas rutas en un archivo separado y las importo en App.js Aquí, para fines de demostración, rutas en App.js :
import { BrowserRouter as Router } from "react-router-dom"; // import your page components // and add everything else you want to add to your component const App = () => { return ( <> <Router> <Routes> <Route path="/login" element={<Login />} /> <Route path="/private" element={<PrivatePage />} /> <Route path="/public" element={<PublicPage />} /> <Route path="/user" element={<UserManagementPage />} /> </Routes> </Router> </> ); }; export default App;Agregando a la respuesta de bloques privados, entonces en sus componentes usaría el
<Redirect to='/your-route' />Luego, crearía una variable de estado booleana y, una vez que se volviera verdadera, podría redirigirla inmediatamente de esta manera (donde está procesando jsx):
render() { {booleanState && <Redirect to='/your-route' />} }