单击按钮从一个页面导航到另一个页面

Question

Hey I'm trying to make a Student Management System, where I made a Login page,Signup and a Dashboard page. Now, while clicking a Button 'Fill Details' from my Dashboard page I need to navigate to another page input.js (Which is actually a separate project). I'll link my code below. Please help me to make it!

  
  
  
 
   
 
    
//input.js
    import React, { Component } from 'react';
    import web3 from './web3';
    import ipfs from './ipfs';
    import storehash from './storehash';
    import { Button } from 'reactstrap';


    class MyComponent extends Component {
      state = {      
        ipfsHash:null,      
        buffer:'',      
        ethAddress:'',      
        transactionHash:'',      
        txReceipt: ''    
      };


      //Take file input from user
      captureFile =(event) => {event.stopPropagation() 
        event.preventDefault() 
        const file = event.target.files[0] 
        let reader = new window.FileReader() 
        reader.readAsArrayBuffer(file) 
        reader.onloadend = () => this.convertToBuffer(reader) };


      //Convert the file to buffer to store on IPFS 
          convertToBuffer = async(reader) => {

      //file is converted to a buffer for upload to IPFS        
          const buffer = await Buffer.from(reader.result);   

      //set this buffer-using es6 syntax        
           this.setState({buffer});};

      //ES6 async 
        functiononClick = async () => {try{this.setState({blockNumber:"waiting.."});        
        this.setState({gasUsed:"waiting..."});
        await web3.eth.getTransactionReceipt(this.state.transactionHash, (err, txReceipt)=>{          
          console.log(err,txReceipt);          
          this.setState({txReceipt});        
        });    
      }

      catch(error){      
        console.log(error);   
       }}


       onSubmit = async (event) => {      
         event.preventDefault();

         //bring in user's metamask account address      
         const accounts = await web3.eth.getAccounts();   

         //obtain contract address from storehash.js      
         const ethAddress= await storehash.options.address;      
         this.setState({ethAddress});    

         //save document to IPFS,return its hash#, and set hash# to state      
         await ipfs.add(this.state.buffer, (err, ipfsHash) => {        
           console.log(err,ipfsHash);        

           //setState by setting ipfsHash to ipfsHash[0].hash        
           this.setState({ ipfsHash:ipfsHash[0].hash });       
           
           
           // call Ethereum contract method "sendHash" and .send IPFS hash to etheruem contract       
          //return the transaction hash from the ethereum contract        
          storehash.methods.sendhash(this.state.ipfsHash).send({          
            from: accounts[0]        
          }, 
            (error, transactionHash) => {          
            console.log(transactionHash);          
            this.setState({transactionHash});        
          });  

          

        })    
      };


      render() {
        return (        
        <div className="App">          
        <header className="App-header">  
        <h1>EduDecentro</h1>          
        </header>

        <hr/>
        <grid>          
          <h5> Choose Transcript file  </h5>          
          <form onSubmit={this.onSubmit}>            
          <input              
          type = "file"              
          onChange = {this.captureFile}            
          />             
          <Button             
          bsStyle="primary"             
          type="submit">             
          Send it             
          </Button> 
          </form>
          <tbody>                 
             <tr>                   
               <td>IPFS Hash</td>                   
                <td> : </td>                    
                <td>{this.state.ipfsHash1}</td>                  
                </tr>
          </tbody>
          

          <h5> Choose Certificate-1 file  </h5>          
          <form onSubmit={this.onSubmit}>            
          <input              
          type = "file"              
          onChange = {this.captureFile}            
          />             
          <Button             
          bsStyle="primary"             
          type="submit">             
          Send it             
          </Button> 
          </form>
          <tbody>                 
             <tr>                   
               <td>IPFS Hash</td>                   
                <td> : </td>                    
                <td>{this.state.ipfsHash2}</td>                  
                </tr>
          </tbody>

          <h5> Choose Certificate-2 file  </h5>          
          <form onSubmit={this.onSubmit}>            
          <input              
          type = "file"              
          onChange = {this.captureFile}            
          />             
          <Button             
          bsStyle="primary"             
          type="submit">             
          Send it             
          </Button> 
          </form>

          <h5> Choose Resume file  </h5>          
          <form onSubmit={this.onSubmit}>            
          <input              
          type = "file"              
          onChange = {this.captureFile}            
          />             
          <Button             
          bsStyle="primary"             
          type="submit">             
          Send it             
          </Button> 
          

          </form><hr/> 
          </grid>     
        </div>      
       );    
    }}

     export default MyComponent;
 
   
 
  




    


  
  
  
 
   
 
    
    import React from 'react';


    import {Link } from "react-router-dom";

     
    function Dashboard(props) {
     
      // handle click event of logout button
      const handleLogout = () => {    
        props.history.push('/Sign-in');
      }

      
     
      return (
        <div>
          Welcome User!<br /><br />
          <Link to="/input"><button>
                  Fill Details 
                </button>
                </Link>

          <input type="button" onClick={handleLogout} value="Logout" />
        </div>
      );
    }
     
    export default Dashboard;
 
   
 
  

Answer 1

All you have to do is to add event listener for your Fill Details button, you don't need to wrap it into the Link component. Here is the example:

<button onClick={() => window.location.href = 'YOUR_LINK_TO_ANOTHER_APP' }>
  Fill Details 
</button>

Answer 2

<button onClick="window.location.href='Second_App_Page_Link';">Click Here
</button>