Tengo una página de clase de componente inteligente PhoneDirectory.js, donde he usado BrowserRouter y Route para enrutar a la página ShowSubscribers ("/") y la página AddSubscribers ("/add"). Mi requisito es redirigir a la página ShowSubscribers ("/") al enviar el formulario en la página AddSubscribers, pero no entiendo cómo implementarlo. Intenté usar this.props.history.push("/") pero no funciona. Soy nuevo en React, ¿alguien puede ayudarme?
import React from 'react'; import AddSubscriber from './AddSubscriber'; import ShowSubscribers from './ShowSubscribers'; import {BrowserRouter , Route, Routes} from 'react-router-dom'; export default class PhoneDirectory extends React.Component{ constructor(){ super(); this.state = {[]}; } addSubscribers = (subscribers) =>{...} deleteSubscribers = (subscriberId) =>{...} render() { return ( <BrowserRouter> <Routes> <Route exact path='/' element={<ShowSubscribers deleteSubscribers={this.deleteSubscribers} subscribersList={this.state.subscribersList}/>}/> <Route exact path='/add' element={<AddSubscriber addSubscribers={this.addSubscribers}/>}/> </Routes> </BrowserRouter> ) } }Página AddSubscriber del componente tonto
import React from 'react'; import Header from './Header'; import './AddSubscriber.css'; import {Link} from "react-router-dom"; export default class AddSubscriber extends React.Component { constructor() { super(); this.state = { id: 0, name:'', phone:'' } } onChangeHandler = (event) =>{...} onFormSubmitted = (event) =>{ event.preventDefault(); this.props.addSubscribers(this.state); this.setState({id:0, name:"", phone:''}); // Need logic to redirect to "/" ie, ShowSubscribers page } render() { return (<div> <Header heading="Add Subscriber"/> <div className="component-body-container"> <Link to="/"> <button className="custom-btn">Back</button> </Link> <form className="subscriber-form" onSubmit={this.onFormSubmitted.bind(this)}> ............... <button type="submit" className="custom-btn add-btn">Add</button> </div> </form> </div> </div>)} }Probé this.props.history.push("/"), pero no funcionó.
react-router-dom v6 admite solo la versión de ganchos que sugiero, ya que usa el componente de clase para degradar la versión de react-router-dom en package.json.
"dependencies": { ... "react-router-dom": "5.2.1", },Ahora necesita ejecutar: npm install o yarn install Su componente de ruta se verá así
import React from 'react'; import AddSubscriber from './AddSubscriber'; import ShowSubscribers from './ShowSubscribers'; import { Route, Switch, BrowserRouter as Router } from 'react-router-dom'; export default class PhoneDirectory extends React.Component{ constructor(){ super(); this.state = {[]}; } addSubscribers = (subscribers) =>{...} deleteSubscribers = (subscriberId) =>{...} render() { return ( <Router> <Switch> <Route exact path='/'> <ShowSubscribers {...your props goes here}/> </Route> <Route exact path='/add'> <AddSubscriber {...your props goes here}/> </Route> </Switch> </Router> ) } }Ahora puede llamar a this.props.history.push
import React from 'react'; import Header from './Header'; import './AddSubscriber.css'; export default class AddSubscriber extends React.Component { constructor() { super(); this.state = { id: 0, name:'', phone:'' } } onChangeHandler = (event) =>{...} onFormSubmitted = (event) =>{ event.preventDefault(); this.props.addSubscribers(this.state); this.setState({id:0, name:"", phone:''}); // Need logic to redirect to "/" ie, ShowSubscribers page } render() { return (<div> <Header heading="Add Subscriber"/> <div className="component-body-container"> <button className="custom-btn" onClick={()=>this.props.history.push('/')} >Back</button> <form className="subscriber-form" onSubmit={this.onFormSubmitted.bind(this)}> ............... <button type="submit" className="custom-btn add-btn">Add</button> </div> </form> </div> </div>)} }Creo que necesita envolver su página AddSubscriber con withRouter HOC
class AddSubscriber extends React.Component{ ...some-code.... } export default withRouter(AddSubscriber)necesita lógica de navegación ( this.props.history.push("/") ) para ubicarse en una página de addScubscribers. (lo tienes en "página de inicio" en su lugar)