成功提交表单信息后，如何重定向到正确的页面？

Question

As of now, I'm successfully inserting information into the database (SQL, phpMyAdmin) via Home.js but the problem is that every time the user enters information & hits submit, it gets redirected to my demo.php file (not provided) instead of Next.js.

In other words, how can I make it so that upon the user information successfully entering the database and go to the next page? (Next.js)?

What am I doing wrong and how can I fix this?

Here's Home.js:

import React, { Component } from 'react';
import Next from '../Home/Next';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false
        };
        this.getPHP = this.getPHP.bind(this);
        this.goNext = this.goNext.bind(this);
    }

    getPHP() {
        fetch(`http://localhost/demo_react/api/demo.php`, {
            method: 'POST'
        }).then(res => res.json())
            .then(response => {
                console.log('response');
                console.log(response);
            });
    }

    goNext() {
        this.setState({show: true});
    }

    render() {
        const next = this.state.show;

        if(next) {
            return <Next/>;
        }
        return (
            <div>
                <br/>

                <form className="form-control" action="http://localhost/demo_react/api/demo.php" method={"POST"} encType="multipart/form-data">
                    <input type="text" name="username"/>
                    <input type="text" name="password"/>
                    <input type="submit" value="submit" onClick={this.getPHP & this.goNext} name={"submit"}/>
                </form>

            </div>
        );
    }
}

export default Home;

Here's Next.js:

import React, { Component } from 'react';

class Next extends Component {
    render() {
        return(
            <h1>made it</h1>
        );
    }
}

export default Next;

Answer 1

You need to remove the action property from your form and call getPHP() when form is submitted. Also, it's better to have controlled inputs (state of component change when input change). See this for more info: Get form data in Reactjs

<form className="form-control" onSubmit={e => this.getPHP(e)}>
    <input type="text" name="username" value={this.state.username} onChange={e => this.setState({ username: e.target.value })} />
    <input type="text" name="password" value={this.state.password} onChange={e => this.setState({ password: e.target.value })} />
    <input type="submit" value="submit" name="submit" />
</form>

You can access to form values directly in getPHP() method because inputs are now controlled:

constructor(props) {
    super(props);
    this.state = {
        show: false,
        username: '',
        password: '',
    };
}

getPHP(e) { 
    e.preventDefault();
    const { username, password } = this.state;
    const formData = new FormData();
    formData.append('username', username);
    formData.append('password', password );

    fetch(`http://localhost/demo_react/api/demo.php`, {
        method: 'POST',
        headers: new Headers({ 'Content-Type': 'multipart/form-data' }),
        body: formData,
    })
    .then(res => res.json())
    .then(response => {
        console.log('response');
        console.log(response);
        this.goNext();
    });
}

At the end, you can goNext() when the fetch succeed.