Rutas protegidas.js:
En las rutas protegidas, puede ver que estoy usando directamente falso en la declaración if, pero aún puedo ver esa página, ¿por qué?
import React from 'react'; import { Route } from 'react-router-dom'; // import Auth from './User/Auth'; import Error401 from './Error/401'; // create a component for protected route console.log('Routes.js'); export const ProtectedRoute = ({ element: Element, ...rest }) => { console.log("Function Called") return ( <Route {...rest} render={props => { if(false){ return <Element {...props} /> }else{ return <Error401 /> } } } /> ) }App.js: esta es app.js donde estoy usando el componente de rutas protegidas
import './App.css'; import React from 'react'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; import { Layout } from 'antd'; import { MoneyCollectOutlined } from '@ant-design/icons'; import Login from './Components/User/Login'; import Signup from './Components/User/Signup'; import {ProtectedRoute} from './Components/Routes'; import Error404 from './Components/Error/404'; function App() { return ( <BrowserRouter> <Layout style={{minHeight:"100vh"}}> <Layout.Header> <h1 style={{color:"white"}} align="center"> <MoneyCollectOutlined/>MoneyG</h1> </Layout.Header> <Layout.Content style={{minHeight:"100%"}}> <Routes> <ProtectedRoute exact path="/register" element={<Signup/>} /> <ProtectedRoute exact path="/login" element={<Login/>} /> <Route path="*" element={<Error404/>} /> </Routes> </Layout.Content> </Layout> </BrowserRouter> ); } export default App;Primero, los elementos <Routes> solo deben tener elementos <Route> como elementos secundarios. Debe mover su lógica de protección hacia abajo una capa.
En segundo lugar, el accesorio de render ya no existe en V6. Fue reemplazado a favor del element . ver doc .
Así es como podría abordarlo:
<Routes> <Route exact path="/register" element={( <ProtectedRoute> <Signup/> </ProtectedRoute> )} /> <Route exact path="/login" element={( <ProtectedRoute> <Login/> </ProtectedRoute> )} /> <Route path="*" element={<Error404/>} /> </Routes>Y:
const ProtectedRoute = () => { if (condition) { return <Error401 />; } // You might as well use Navigate here return children; };puedes usar createContext y useContext
//store/AuthApi.jsx import { createContext } from "react"; const AuthApi = createContext(); export default AuthApi;Luego define el contexto app.jsx
import React, from 'react' import { AllRoutes } from 'routes/Routes'; import { BrowserRouter as Router } from "react-router-dom"; import AuthApi from 'store/AuthApi'; const App = () => { const [user, setUser] = useState(false); useEffect(() => { // you can get user from localStorage or Cookie(js-cookie npm) //then you can change user state true or false }, []) return ( <> <AuthApi.Provider value={{ user, setUser }}> <Router> <AllRoutes /> </Router> </AuthApi.Provider> <Toast /> </> ) } export default Appluego ver AllRoutes
//routes/Routes import React, { useContext } from "react"; import { Routes, Route } from "react-router-dom"; import { SignIn, SignUp, Dashboard } from "pages"; import AuthApi from "store/AuthApi"; export const ProtectedRouting = () => { return ( <Routes > <Route path='/' exact element={<Dashboard />} /> // add more protected routes </Routes> ) } export const AuthRouting = () => { return ( <Routes > <Route exact={true} path='/sign-in' element={<SignIn />} /> <Route exact={true} path='/sign-up' element={<SignUp />} /> </Routes> ) } export const AllRoutes = ()=> { const context = useContext(AuthApi); console.log(context.user) return ( context.user ? <ProtectedRouting /> : <AuthRouting /> ) }páginas/Iniciar sesión.jsx
import React,{ useContext } from 'react'; import AuthApi from "store/AuthApi"; const SignIn = () => { const context = useContext(AuthApi); const signInSubmit =(e)=> { e.preventDefault(); //post request to signin // if login is successfull then save user or token in cookie or localStorage or something context?.setUser(true); //... } return ( //signin code here <form onSubmit={signInSubmit}> ///input here </form> ) } export default SignIn