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

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

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

Related

Recent Posts