Así que soy nuevo en React y JS en general y he estado siguiendo un curso en línea. El caso es que, después de algunos capítulos, noté que algunas cosas relacionadas con las rutas que hace el tipo ya no funcionan. Por ejemplo:
<Route path='/something' component={Something}/>Pasé toda la mañana buscando en línea. Parece que usa una versión diferente de react-router-dom que yo. Así que busqué cómo hacer lo mismo en versiones más nuevas de sus documentos oficiales y finalmente lo resolví implementando rutas como:
<Route path='/something' element={<Something/>} />Ahora tengo otro problema. Quiero obtener un parámetro de la URL pero tampoco funciona y los documentos oficiales solo ofrecen un ejemplo usando funciones (pero necesito usar clases).
Así es como lo implemento actualmente:
<Route path='/profile/:user' element={<UserInfo/>}/>UserInfo.js:
import React from 'react'; class UserInfo extends React.Component { state = { user: '' } componentDidMount() { console.log(this) let user = this.props.match.params.user; this.setState({user:user}); } render() { const { user } = this.state return( <div> <h1>{user}</h1> </div> ) } } export default CardPero tampoco funciona porque this.props está vacío " props: Object { } ". Debería haber un objeto coincidente, pero no hay nada dentro (según la consola de desarrollo). ¿Cómo puedo resolver esto sin hacer que UserInfo sea una función? Porque quiero tener estados.
Con react-router-dom V6 puede, por ejemplo, crear un HOC (componente de orden superior) muy simple para poder usar useParams dentro de un componente de class .
HOC.js
import {useParams} from 'react-router-dom' export function withParams(Component) { return props => <Component {...props} params={useParams()} />; }Luego inclúyalo en UserInfo.js
import React from "react"; import { withParams } from "./HOC"; class UserInfo extends React.Component { constructor(props) { super(props); this.state = { user: "" }; } componentDidMount() { let user = this.props.params.user; console.log(user); this.setState({ user: user }); } render() { return ( <div> <h1>{this.state.user}</h1> </div> ); } } export default withParams(UserInfo);índice.js
import ReactDOM from "react-dom"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import UserInfo from "./UserInfo"; const rootElement = document.getElementById("root"); ReactDOM.render( <BrowserRouter> <Routes> <Route path={"/profile/:user"} element={<UserInfo />} /> </Routes> </BrowserRouter>, rootElement );Aquí hay unSandbox en caso de que lo necesite:
La antigua solución react-router-dom V5 sería:
import { StrictMode } from "react"; import ReactDOM from "react-dom"; import { BrowserRouter, Route } from "react-router-dom"; import UserInfo from "./UserInfo"; const rootElement = document.getElementById("root"); ReactDOM.render( <StrictMode> <BrowserRouter> <Route path={["/profile/:user"]} component={UserInfo} /> </BrowserRouter> </StrictMode>, rootElement );Y acceda a los datos del usuario dentro del componente de clase así:
import React from "react"; class UserInfo extends React.Component { constructor(props) { super(props); this.state = { user: "" }; } componentDidMount() { let user = this.props.match.params.user; console.log(user); this.setState({ user: user }); } render() { const { user } = this.state; return ( <div> <h1>{user}</h1> </div> ); } } export default UserInfo;No hay razón para tener una clase aquí, son un poco inútiles ahora que tenemos ganchos. Para obtener un estado en un componente funcional, puede usar el gancho useState . De esta manera, reproduces lo que sabes sobre el estado en una clase, pero en una función. Aquí hay un ejemplo :
import React, { Component } from "react"; import { render } from "react-dom"; import "./style.css"; const App = () => { const [myState, setMyState] = React.useState(); return ( <div> My state = {myState}<br /> <button onClick={() => setMyState(Math.random())}> Edit my state</button> </div> ); }; render(<App />, document.getElementById("root"));Intenta agregar:
constructor(props) { this.state = { user: '' }; }en vez de :
state = { user: '' }No ejecuté tu código, pero lo vi de inmediato. Y considere usar componentes funcionales con ganchos en su lugar, esa forma más nueva y estandariza el código de reacción.