Aquí está mi código del archivo PrivateRoute.js
import React from "react"; import {Route,Redirect} from "react-router-dom" import {isAuthenticated} from "./index" const PrivateRoutes = (props)=>{ return( isAuthenticated()?(<Route render={ (props) => <component {...props}/>} />): (<Redirect to={{ pathname:"/signin"}}/>) // <h1>hey there</h1> ) } export default PrivateRoutes;En este código, dice que el valor de los accesorios se lee pero nunca se usa, pero lo estoy usando en la función de renderizado, la desestructuración tampoco funciona aquí. Aquí isAuthenticated() es mi función booleana. Si se evalúa como verdadero, quiero obtener más rutas hacia el panel de control del usuario.
Así es como se ve mi archivo route.js
import React from 'react' import {BrowserRouter,Route,Switch} from "react-router-dom"; import AdminRoutes from './auth/helper/AdminRoutes'; import PrivateRoutes from './auth/helper/PrivateRoutes'; import Home from './core/Home'; import AdminDashboard from './user/AdminDashBoard'; import Signin from './user/Signin'; import Signup from './user/Signup'; import UserDashboard from './user/UserDashBoard'; function Routes() { return ( <BrowserRouter> <Switch> <Route exact path='/' component={Home} /> <Route exact path="/signup" component={Signup} /> <Route exact path="/signin" component={Signin} /> <PrivateRoutes component="UserDashboard" exact path="/user/dashboard"/> <AdminRoutes exact path="/admin/dashboard" component={AdminDashboard}/> </Switch> </BrowserRouter> ) } export default RoutesAyúdame a resolver este problema.
Esto se debe a que ha declarado * dos funciones, cada una de las cuales toma un argumento de objeto de props , pero solo se hace referencia a los props de la función interna/anidada.
Cambie el nombre de los accesorios anidados a algo más como routeProps y distribuya ambos al componente renderizado. Recuerde también que los nombres válidos de los componentes de React son PascalCased.
Ejemplo:
const PrivateRoutes = ({ component: Component, ...props }) => { return isAuthenticated() ? ( <Route render={(routeProps) => ( <Component {...props} {...routeProps} /> )} /> ) : <Redirect to={{ pathname:"/signin"}}/>; } Luego, corrija también el uso del componente PrivateRoutes para pasar un valor de referencia del componente React en lugar de una cadena.
<Switch> <Route path="/signup" component={Signup} /> <Route path="/signin" component={Signin} /> <PrivateRoutes component={UserDashboard} path="/user/dashboard" /> <AdminRoutes path="/admin/dashboard" component={AdminDashboard} /> <Route path='/' component={Home} /> </Switch>