How to navigate to homepage upon form submit in react web using react-router-dom v6.2.1?-CodePudding

I have a Smart component class page PhoneDirectory.js, where I have used BrowserRouter and Route to route to the ShowSubscribers page("/") and AddSubscribers page ("/add"). My requirement is to redirect to the ShowSubscribers page("/") upon form submission on the AddSubscribers page but not understand how to implement that. I tried using this.props.history.push("/") but it isn't working. I am new to React, can anyone please help?

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>
        )
    }
}

Dumb component AddSubscriber page

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 "/" i.e., 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>)}
}

I tried this.props.history.push("/"), but it didn't worked.

CodePudding user response：

react-router-dom v6 support only hooks version i suggest since you use class component to downgrade the version of react-router-dom in package.json.

  "dependencies": {
    ...
    "react-router-dom": "5.2.1",
  },

Now you need to run : npm install or yarn install Your Route component will look like that

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>
        )
    } 
}

Now you are able to call 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 "/" i.e., 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>)}
}

CodePudding user response：

I think that you need to wrap your AddSubscriber page with withRouter HOC

class AddSubscriber extends React.Component{
...some-code....
}

export default withRouter(AddSubscriber)

CodePudding user response：

you need navigation logic (this.props.history.push("/")) to be located a addScubscribers page. (you have it at "homepage" instead)