Estoy tratando de usar el gancho de reacción useParams() para recuperar un parámetro, pero recibo este error:
TypeError: useContext(...) is undefined
Este error en realidad lo arroja el archivo de ganchos, específicamente esta línea (línea 40):
/modules/hooks.js:40 39 | > 40 | const match = useContext(Context).match; 41 | return match ? match.params : {}; 42 | }Mi archivo App.js que contiene la lógica de enrutamiento se ve así:
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import { ThemeProvider } from "@material-ui/core"; import theme from "./views/config/theme"; import { routes } from "./views/config/routes"; import Header from "./views/components/common/Header"; import Footer from "./views/components/common/Footer"; function App() { return ( <div> <ThemeProvider theme={theme}> <Router> <Header /> <Switch> {routes.map((route) => ( <Route exact path={route.path}> {route.component()} </Route> ))} </Switch> <Footer /> </Router> </ThemeProvider> </div> ); } export default App;El archivo route.js que contiene todas las rutas tiene este aspecto:
import Dashboard from "../pages/Dashboard"; import UserDetails from "../pages/UserDetails"; export const routes: [ { name: "Dashboard", path: "/dashboard", component: Dashboard, access: "public", }, { name: "User details", path: "/user/:id", component: UserDetails, access: "private", }, ];y este es el archivo del componente UsersDetails donde estoy tratando de usar el gancho useParams(), se ve así:
import { useParams } from "react-router-dom"; const UserDetails = () => { const { id } = useParams(); return ( <div> <p>{id}</p> </div> ); }; export default UserDetails;Estoy usando:
NodeJS - 14.17.0
y:
"react": "^17.0.2" "react-dom": "^17.0.2" "react-router": "^5.2.0" "react-router-dom": "^5.2.0" "react-scripts": "4.0.3"1. Configuración de rutas
En primer lugar, en las rutas => el componente debe envolverse entre paréntesis angulares de apertura y cierre. Por ejemplo, mis rutas se verán así:
const routes = [ { name: "Dashboard", path: "/dashboard", component: <Dashboard />, access: "public", }, { name: "User details", path: "/user/:id", component: <UserDetails />, access: "private", }, ];2. Creación de dos componentes para la prueba
A continuación, creé dos componentes como este:
const Dashboard = () => { return <h2>Dashboard</h2>; } const UserDetails = () => { let { id } = useParams(); return <div style={{ fontSize: "50px" }}> User Detail {id} </div>; }3. Envolviendo el componente de la aplicación
En App Component, no necesitamos llamar a la función del componente (route.component() ). Por ejemplo, tenga este aspecto:
const App = () => { return ( <Router> <div> <Header /> <Switch> {routes?.map((route) => <Route path={route.path}> {route.component} </Route>)} </Switch> </div> </Router> ); }