How do I redirect user to another page after submit the form using Reactjs?

Question

I want to redirect the user after submit the form in react JavaScript, example when user submit the form he/she redirect to google.com or some other URL with he/she information what he/she entered in the input filed. I created simple with one filed and submit button.

Here my sample code

    //it is a homepage.js

        import React from 'react';
        import {BrowserRouter,Routes,Route,Link} from 'react-router-dom';
        import Admin from "./adminpage";
        import FB from "./feedbackpage";
        
        class Home extends React.Component{
            obj = {
              backgroundColor:"white",
              width:"80%"
            }
           constructor(){
             super();
             this.state={
               username:"",
               password:"",
               year:""
             }
             this.handlelogin = this.handlelogin.bind(this);
             this.handleuser = this.handleuser.bind(this);
             this.handlepassword = this.handlepassword.bind(this);
           }
           handleuser=(event)=>{
             this.setState({username:event.target.value})
           }
           handlepassword=(event)=>{
             this.setState({password:event.target.value})
           }
           handleyear=(event)=>{
             this.setState({year:event.target.value})
           }
           a = "noorullah";
           b = "mohammad";
              
           handlelogin=(e)=>{
            e.preventDefault();
             if (this.state.username === this.a && this.state.password === this.b){
                 this.props.history.push('/adminpage');
             }
             else{
              this.props.history.push('/feedbackpage');
             }
           }
           
          render(){
                return(
                  <div> 
                      <div>
                     <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top"> 
                        <div class="container-fluid">
                           <a class="navbar-brand" href="/" style={{color:"#ebf2f4"}}>
              <img src="logo.png" alt="here logo" width="5%" height="5%" class="d-inline-block align-text-top"/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; POTTI SRIRAMULU COLLEGE OF ENGINEERING AND TECHNOLOGY, VIJAYAWADA (PSCMR CET) KRISHNA    </a>
                     </div>
                     </nav>
                  </div>
        
                    <section>
                      <div class = "Contsiner mt-5 pt-5">
                        <div class = "row">
                          <div class = "col-12 col-sm-8 col-md-4 mx-auto">
                            <div class = "card border-0 shadow-lg" style={this.obj} >
                              <div class = "card-body">
                              <svg className='mx-auto my-3' style={{width:"100%"}} xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
             <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
             <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
                              </svg>
                                 <form >
                                  <input type="text" name = "username" id = "username" class = "form-control my-3 py-2"  placeholder='username' value={this.state.username} onChange={this.handleuser} required />
                                  <input type="password" name = "password" id = "password" class = "form-control my-3 py-2" placeholder='password' value={this.state.password} onChange={this.handlepassword} required/>
                                  
                                  <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example" onChange={this.handleyear}>
                                     <option selected >Select Academic Year</option>
                                     <option value="1">1st Year</option>
                                     <option value="2">2nd Year</option>
                                     <option value="3">3rd Year</option>
                                     <option value="4">4rd Year</option>
                                  </select>
        
        
                                  <div class = "text-center mt-6">
        
                                    <button class = "btn btn-primary btn-lg px-5" onClick={this.handlelogin}>Login</button>
                                  </div>
                                  
                                </form>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </section>
                    <BrowserRouter>
                        <Routes>
                            <Route path = "/adminpage" element = {<Admin />} />
                            <Route path = "/feedbackpage" element = {<FB />} />
                        </Routes>
                       
                    </BrowserRouter>
                   
        </div>
                )
            }
        }
export default Home;


--------------------------------------------

// adminpage.js

import React from "react";

class Admin extends React.Component{
    render(){
        return(
            <h1>this is admin page</h1>
        )
    }
}
export default Admin;


--------------------------------------------------
// feedbackpage.js

import React from "react";

class FB extends React.Component{
    render(){
        return(
            <h1>this is feedbackpage page</h1>
        )
    }
}
export default FB;

but it is not working why?

Answer 1

You can't use this.props.history.push from outside of a Route. Notice how your homepage isn't a part of your Routes inside BrowserRouter:

                    <BrowserRouter>
                        <Routes>
                            <Route path = "/adminpage" element = {<Admin />} />
                            <Route path = "/feedbackpage" element = {<FB />} />
                        </Routes>
                       
                    </BrowserRouter>

You will need to make sure your homepage.js is inside a Route and then you will be able to use this.props.history.push.

One way you could do this would be to put your Route code inside of it's own file like this:

                    <BrowserRouter>
                        <Routes>
                            <Route path = "/adminpage" element = {<Admin />} />
                            <Route path = "/feedbackpage" element = {<FB />} />
                            <Route path = "/homepage" element = {<Homepage />} />
                        </Routes>
                    </BrowserRouter>

I don't know what your project file structure looks like, but you'll want your BrowserRouter one of the highest components in your project. You may have an index.js file that calls root.render(<App />) or some variation of that. You can put the code for your router inside of the <App /> component.

Here's an example of that set up: